JQuery: автоматическая прокрутка страницы, но допускается колесико мыши, все еще с прокруткой - PullRequest
Новая
       33

JQuery: автоматическая прокрутка страницы, но допускается колесико мыши, все еще с прокруткой

1 голос
/ 03 января 2011

Я пытаюсь создать функцию, в которой пользователь видит меню с 5 числами, 1 - 5. 1 = самое медленное и 5 = самое быстрое, когда кто-то нажимает на одно из этих чисел, страница начинает прокручивать себя, делаячтобы человеку не приходилось листать страницу.Проблема, с которой я столкнулся, заключается в том, что я хочу разрешить человеку по-прежнему иметь доступ к своему колесу мыши, но когда я использую колесо мыши, пока страница анимируется, она перетаскивает страницу вниз, а затем перетаскивает страницу обратно на местои он продолжает анимацию, но не позволяет мне прокручивать вниз или назад, а затем анимировать из новой позиции, на которую я прокручивал, с помощью колесика мыши.Прямо сейчас у меня это так, если я нажимаю на страницу во время прокрутки, она останавливается, но я не включаю это в финальный скрипт, какая-нибудь помощь?СПАСИБО! 

$('html,body').animate({scrollTop: $(target).offset().top},430000) 

$('html,body').click(function(){
  $('html,body').stop()
})

1 Ответ

1 голос
/ 03 января 2011

Я попытался выполнить это, нажав на событие scroll, но, увы, это событие вызывалось неоднократно, когда анимация работала (должен был знать лучше).

В итоге я использовал jQuery Mousewheel Plugin , который более чувствителен к событиям прокрутки и может различать scroll и mousewheel, так что вы можете написать что-то вроде этого: 

$(window).bind("mousewheel", function() {
    $("html, body").stop();
});

http://jsfiddle.net/Yuw9R/1/

Прокрутка колесом вверх или вниз должна остановить автоматическую прокрутку.Возможно, вы захотите добавить код, чтобы снова включить стрелки вверх / вниз.Вот код, который вы можете добавить, чтобы сделать это: 

$(window).bind("keydown", function(event) {
    var keyCode = event.which;
    /* up, down, left, right, or page up or page down */
    if (keyCode === 33 || keyCode == 34 || (keyCode >= 37 && keyCode <= 40)) {
        $("html, body").stop();
    }
});

Если вы не хотите использовать плагин, проверьте эту связанную ветку .

...