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

发布于 2024-11-15 23:49:44 字数 903 浏览 3 评论 0原文

我进行了搜索，有一些类似的帖子，但我似乎无法让它发挥作用。我知道这是陈词滥调，但我对 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），但我不知道如何在上面的代码中使用它。任何人都可以帮我解决这个问题吗？再次感谢。

原文

I did searches and there were a few similar posts but I can't seem to get it to work. I know that its a cliche but I am quite new to JQuery and JQuery UI as my core skills is PHP, so any help is greatly appreciated. Below are the codes that I have for the JQuery vertical slider.

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

and the functions

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)   
});

The vertical slider works fine but now I need to integrate mouse wheel support. I have downloaded the mouse wheel plugin by Brandon Aaron (jquery-mousewheel ver. 3.0.4) but I have no idea how to use it with my codes above. Anyone can help me with this? Thanks again.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

不一样的天空 2024-11-22 23:49:44

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

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

After doing some tests I've come up with this solution:

$('#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);
    }
});

Seems to work fine on Chrome/Firefox/Opera
(using jQuery 1.10.1)

回复收藏 0 原文

~没有更多了~