JQuery UI слайдер ответить на прокрутку

Question

JQuery UI слайдер ответить на прокрутку

0

У меня есть вертикальный слайдер, построенный с использованием плагина jquery ui slider.

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

Поскольку слайдер не является прокручиваемым объектом, он не отвечает на метод .scroll.

Я нашел обходное решение, проверяя, находится ли мышь над ползунком при прокрутке окна. Используя этот метод, у меня есть две проблемы:

1- Хотя я использую event.preventDefault() окно все еще прокручивается...

2- Если окно прокручивается полностью, ползунок больше не может прокручиваться, даже если он не находится в первой позиции.

var lastScrollTop = 0;
$(window).scroll(function (e) {
    if (mouseSlider) {
        e.preventDefault(); //Doesn't stop window from scrolling
        var st = $(this).scrollTop();
        if (st > lastScrollTop) {
            $('#next-day').click();
        } else {
            $('#prev-day').click();
        }
        lastScrollTop = st;
        return false;
    }
});

Вот пример: http://jsfiddle.net/4xCyk/1/

Почему event.preventDefault() работает правильно? Есть ли способ включить прокрутку, даже если полоса прокрутки является вершиной?

Или есть гораздо более простой способ сделать это?

Kassym Dorsel 03 окт. 2013, в 22:33

Источник

Теги:

jquery

slider

2 ответа

0

Чтобы ответить "1- Хотя я использую event.preventDefault(), окно все еще прокручивается..."

потому что вы объявили mouseSlider с var mouseSlider который создает локальную переменную, не var mouseSlider глобальной, для использования в разных функциях

Смотрите это: http://jsfiddle.net/4xCyk/9/

Sam Battat 03 окт. 2013, в 19:07

0

Если mouseSlider не был доступен из функции прокрутки, ползунок никогда не будет двигаться. С или без var он работает точно так же. У скрипки в вашем примере тот же результат, что и у меня ...
Kassym Dorsel 04 окт. 2013, в 13:22

Ещё вопросы

Если mouseSlider не был доступен из функции прокрутки, ползунок никогда не будет двигаться. С или без var он работает точно так же. У скрипки в вашем примере тот же результат, что и у меня ...

Kassym Dorsel · Accepted Answer · 2013-10-07T16-50-00.000Z

Я, наконец, решил это с помощью JQuery-плагина: https://github.com/brandonaaron/jquery-mousewheel

$('#slider').mousewheel(function(event, delta) {
    if (delta > 0)
        $('#prev-day').click();
    else
        $('#next-day').click();
    event.stopPropagation();
    event.preventDefault();
});