Отключить прокрутку, когда происходит анимация прокрутки

Я пытаюсь создать анимацию прокрутки, когда пользователь перемещает колесо мыши вверх или вниз, нажимает стрелки ключевых слов или перемещает полосу прокрутки сбоку.

Это очень похоже на то, что я нашел на этом сайте. Поскольку я не нашел для него плагина jQuery, я пытаюсь воспроизвести его самостоятельно, и у меня возникают проблемы с поведением прокрутки.

Когда происходит анимация прокрутки, вы все еще можете прокручивать колесико мыши, и это заставляет движение выглядеть уродливо, перемещаясь вверх и вниз некоторое время.

Вот моя скрипка, где вы можете ее проверить: http://jsfiddle.net/k4rsN/1/

Проблема в том, что прокрутка не отключена, и прежде чем я смогу проверить, прокручиваются ли они вверх или вниз, сайт уже немного прокрутился (движение колеса или ключевое слово). Поэтому я считаю, что способ решить эту проблему - отключить эффект прокрутки и позволить мне решать, что делать, когда пользователь решает прокрутить.

Я просматривал такие сообщения, как это или это, но это не решает мой проблема.

Вот что я сделал до сих пор, как вы можете видеть в скрипке:

var lastScrollTop = 0;
var isMoving = false;

$(window).scroll(function () {
    var currentScroll = $(window).scrollTop();

    //scrolling down?
    if (currentScroll > lastScrollTop && !isMoving) {
        var value = '#link2';
    }
    //scrolling up?
    else if (!isMoving) {
        var value = '#link1';
    }

    lastScrollTop = currentScroll;

    //animation
    if (value && !isMoving) { //if theres any #
        isMoving = true;

        dest = $(value).offset();

        $('html, body').animate({
            scrollTop: dtop
        }, 1200, function () {

            //setting the flag to avoid checking the scrolling when performing the animation
            isMoving = false;
        });
    }
});

Спасибо.


person Alvaro    schedule 08.07.2013    source источник


Ответы (1)


В начале вашей функции вы можете применить некоторые атрибуты CSS, чтобы сделать ее непрокручиваемой. Затем, в конце анимации, верните ее в нормальное состояние. Например:

В начале вашей анимации

$('html, body').css({
    'overflow': 'hidden',
    'height': '100%'
})

Затем, в конце

$('html, body').css({
    'overflow': 'auto',
    'height': 'auto'
})

Это практически то же самое, что и этот ответ: https://stackoverflow.com/a/17293689/2247151

person Noah T    schedule 08.07.2013
comment
Нет. Если я отключу прокрутку с помощью CSS, я не могу определить, прокручивает пользователь или нет, и мой код не работает. - person Alvaro; 08.07.2013
comment
Ой. Я не понял, что вы специально хотели это отследить. Извини за это. - person Noah T; 09.07.2013