Имитация верхней прокрутки с помощью javascript setInterval и clearInterval

Я хочу имитировать прокрутку, перемещая кадр body/html вверх/вверх на произвольную величину. Я знаю функцию прокрутки или анимации jQuery, .scroll() и .animate(). Но я решил не использовать его, так как это вызвало конфликт между свойством scrollTop в animate и .scroll() собственной функции jQuery, когда анимация происходит и все еще продолжается, И вызывается .scroll.

Мой план теперь состоит в том, чтобы просто имитировать прокрутку, перемещая кадр body/html вверх как можно более плавно на некоторую произвольную величину, а затем STOP (очистить интервал), когда происходит родной scroll (вызывается .scroll()).

Я могу остановить анимацию setInterval при вызове .scroll(), но я все еще не могу переместить html-объект вверх на величину, которую я хочу "прокрутить" (что означает, что мой код работает только частично).

Вот что у меня есть до сих пор:

var scrollTop = //Some arbitrary value
var fakeScroll = setInterval(function(){
      console.log(scrollTop);
      var animObj = $('html,body');
      animObj.top = animObj.offset().top + scrollTop;   
    },500);
    $(document).scroll(function(){
        clearInterval(fakeScroll);
    });

Ценю любые предложения/ответы. Спасибо!


javascript animation jquery setinterval
person Benny Tjia    schedule 12.01.2012    source источник

Ответы (3)


arrow_upward
0
arrow_downward

просто используйте window.scrollTo(0,Y) при изменении значения Y.

person Diodeus - James MacFarlane    schedule 12.01.2012
comment
Однако это вызывает событие $(document).scroll, поэтому оно будет выполняться только один раз. - person Reinstate Monica Cellio; 13.01.2012
comment
Установите флаг для выхода из $(document).scroll, пока вы выполняете это. - person Diodeus - James MacFarlane; 13.01.2012
comment
Если вы идете по маршруту window.scroll, тогда window.scrollBy(x,y) будет лучше, чем получение текущей позиции и выполнение вычисления для нее. - person Reinstate Monica Cellio; 13.01.2012

arrow_upward
0
arrow_downward

Это работает, но я не думаю, что это то, что вы ищете, поскольку страница не прокручивается, а перемещается содержимое...

var scrollTop = 1;
var fakeScroll = setInterval(function() {
    console.log(scrollTop);
    var animObj = $('html,body');
    animObj.offset({ top: animObj.offset().top - scrollTop })
}, 500);
$(document).scroll(function() {
    clearInterval(fakeScroll);
});
person Reinstate Monica Cellio    schedule 12.01.2012

arrow_upward
0
arrow_downward

Решил эту проблему без использования таймера. Оказывается, собственное событие прокрутки и анимация jQuery — это два разных события прокрутки. Что я делаю, так это слушаю конкретное событие прокрутки, которое происходит от встроенной прокрутки (DOMMousewheel и mousewheel), а затем, когда это происходит, я останавливаю анимацию. Спасибо за ответы!

person Benny Tjia    schedule 23.01.2012