Возврат false / сброс тайм-аута не идет для анимации прокрутки

Question

Возврат false / сброс тайм-аута не идет для анимации прокрутки

0

Последний div в нижней части сайта блокируется в нижней части страницы и не позволит мне прокручивать резервную копию без обновления. Явный тайм-аут не работает.

Что мне нужно изменить для решения этой проблемы?

Вот мои js:

function autoScrollTo(el){
    var sliderPx = document.getElementById('nav').style.top; 
    var sliderPos = sliderPx;
    var targetPos = document.getElementById(el).offsetTop;
    if(sliderPos < targetPos){
        scrollDown(el);
    } else {
        scrollUp(el)
    }
}

var scrollAmount = 0;
var distance = 38;
var speed = 16;
function  scrollDown(el){
    var offsetY = window.pageYOffset;
    var targetY = document.getElementById(el).offsetTop;
    var timeLooper = setTimeout ('scrollDown(\''+el+'\')', speed);
    if(offsetY < targetY){
        scrollAmount = offsetY+distance;
        window.scroll(0, scrollAmount);
    } else {
        clearTimeout(timeLooper);   
    }
}

function  scrollUp(el){
    var currentY = window.pageYOffset;
    var targetY = document.getElementById(el).offsetTop;
    var looper = setTimeout ('scrollUp(\''+el+'\')', speed);
    if(currentY > targetY){
        scrollY = currentY-distance;
        window.scroll(0, scrollY);
    } else {
        clearTimeout(looper);   
    }
}

Вот мой HTML:

<div id="nav">
    <ul>
        <li><a href="#" onclick="return false;" onmousedown="autoScrollTo('services');">SERVICES</a></li>
        <li><a href="#" onclick="return false;" onmousedown="autoScrollTo('feed');">CONTACT</a></li>
    </ul>
    <div class="clearFix"></div>
</div><!--/nav-->

user3333596 20 фев. 2014, в 17:55

Источник

0

У вас есть ссылка с полным примером? Намного легче увидеть, что происходит;)
sebastian 20 фев. 2014, в 17:01
0

Я согласен. Я настроил скрипку здесь, но для этого действительно нужна прокрутка к добавленным элементам: jsfiddle.net/RVYc5
WheretheresaWill 20 фев. 2014, в 17:03

Теги:

javascript

html

css

animation

timeout

1 ответ

Ещё вопросы

У вас есть ссылка с полным примером? Намного легче увидеть, что происходит;)
Я согласен. Я настроил скрипку здесь, но для этого действительно нужна прокрутка к добавленным элементам: jsfiddle.net/RVYc5

sebastian · Answer 1 · 2014-02-20T15-26-00.000Z

Честно говоря, вы должны пересмотреть свое решение, работать с JQuery (оживить) и изменить логику прокрутки, однако я изменил некоторые вещи и добавил флаг, который ловит вашу бесконечную прокрутку... просто быстрый обходной путь, но серьезно, начните сначала, или у вас не будет приличного кроссбраузерного прокрутки!

function autoScrollTo(el){
    console.log(el);
    var scrollPos = document.documentElement.scrollTop;
    var targetPos = document.getElementById(el).offsetTop;

    console.log(scrollPos + "," + targetPos);
    if(scrollPos < targetPos){
        scrollDown(el);
    } else {
        scrollUp(el)
    }
}

var scrollAmount = 0;
var distance = 38;
var speed = 16;

var lastPosition;

function  scrollDown(el){
    var offsetY = document.documentElement.scrollTop;
    var targetY = document.getElementById(el).offsetTop;
    var timeLooper = setTimeout ('scrollDown(\''+el+'\')', speed);

    if(offsetY < targetY && lastPosition != offsetY){
        console.log(offsetY + "," + targetY);
        scrollAmount = offsetY+distance;
        window.scroll(0, scrollAmount);

    } else {
        console.log("end down");
        clearTimeout(timeLooper);   
    }
    lastPosition = offsetY;
}

function  scrollUp(el){
    var currentY = document.documentElement.scrollTop;
    var targetY = document.getElementById(el).offsetTop;
    var looper = setTimeout ('scrollUp(\''+el+'\')', speed);
    if(currentY > targetY && lastPosition != currentY){
        scrollY = currentY-distance;
        window.scroll(0, scrollY);
    } else {
        console.log("end up");
        clearTimeout(looper);   
    }
    lastPosition = currentY;
}