将鼠标滚轮绑定到Jquery UI滑块 [英] Bind Mouse Wheel To Jquery UI Slider
问题描述
我进行了搜索,并且有一些类似的帖子,但是我似乎无法使它正常工作.我知道这是一个陈词滥调,但是我对JQuery和JQuery UI还是很陌生,因为我的核心技能是PHP,因此非常感谢您的帮助.以下是我为JQuery垂直滑块提供的代码.
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
});
和功能
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),但是我不知道如何在上面的代码中使用它.有人可以帮我吗?再次感谢.
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.
推荐答案
做完一些测试后,我提出了以下解决方案:
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);
}
});
似乎可以在Chrome/Firefox/Opera上正常工作 (使用jQuery 1.10.1)
Seems to work fine on Chrome/Firefox/Opera (using jQuery 1.10.1)
这篇关于将鼠标滚轮绑定到Jquery UI滑块的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!