Привязать колесо мыши к слайдеру Jquery UI - PullRequest
Новая
       31

Привязать колесо мыши к слайдеру Jquery UI

3 голосов
/ 20 июня 2011

Я выполнил поиск и там было несколько похожих постов, но я не могу заставить его работать. Я знаю, что это клише, но я новичок в JQuery и JQuery UI, так как мои основные навыки - PHP, поэтому любая помощь очень ценится. Ниже приведены коды, которые у меня есть для вертикального слайдера JQuery. 

$("#VerticalScrollBar").slider({    
    orientation: "vertical",
    change: VerticalHandleChange,
    slide: VerticalHandleSlide,
    min: -100,
    max: 0
});

и функции 

function VerticalHandleChange(e, ui) {
var maxScroll = $(".VerticalScroll").attr("scrollHeight") - $(".VerticalScroll").height();
$(".VerticalScroll").animate({ 
    scrollTop: -ui.value * (maxScroll / 100)
}, 1000);

function VerticalHandleSlide(e, ui) {
var maxScroll = $(".VerticalScroll").attr("scrollHeight") - $(".VerticalScroll").height();
$(".VerticalScroll").attr({ 
    scrollTop: -ui.value * (maxScroll / 100)   
});

Вертикальный слайдер работает нормально, но теперь мне нужно интегрировать поддержку колесика мыши. Я скачал плагин колесика мыши от Brandon Aaron (jquery-mousewheel ver. 3.0.4), но я не знаю, как использовать его с моими кодами выше. Кто-нибудь может мне помочь с этим? Еще раз спасибо.

1 Ответ

5 голосов
/ 18 августа 2013

После некоторых тестов я пришел к такому решению: 

$('#sliderid').on('mousewheel DOMMouseScroll', function(e) {
    var o = e.originalEvent;
    var delta = o && (o.wheelDelta || (o.detail && -o.detail));

    if ( delta ) {
        e.preventDefault();

        var step = $(this).slider("option", "step");
            step *= delta < 0 ? 1 : -1;
        $(this).slider("value", $(this).slider("value") + step);
    }
});

Кажется, работает нормально на Chrome / Firefox / Opera (используя jQuery 1.10.1)

...