Question

我进行了搜索，并且有一些类似的帖子，但我似乎无法让它发挥作用。我知道这是陈词滥调，但我对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版本3.0.4）的鼠标滚轮插件，但我不知道如何将它与上面的代码一起使用。有人可以帮我这个吗？再次感谢。

Answer 1

在做了一些测试后，我想出了这个解决方案：

$('#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）

将鼠标滚轮绑定到Jquery UI滑块

1 个答案: