在 jQuery 自定义滚动条中使用鼠标滚动事件移动自定义滚动条
Posted
技术标签:
【中文标题】在 jQuery 自定义滚动条中使用鼠标滚动事件移动自定义滚动条【英文标题】：move the custom scroll by using mouse scrolling event in jQuery Custom Scrollbar 【发布时间】：2013-07-02 02:36:53 【问题描述】：我正在使用这个https://github.com/mzubala/jquery-custom-scrollbar/ 插件来自定义滚动条。它在所有浏览器中都能正常工作。
问题是，我想通过鼠标滚动事件来移动水平滚动条。任何人都可以帮忙吗？请！
index.html
<html>
<head>
<title>Custom Scrollbar</title>
<link type="text/css" rel="stylesheet" href="jquery.custom-scrollbar.css"/>
<style type="text/css">
/*Horizontal scrollbar - set width and height of a div you want to add a scrollbar to*/
#horizontal-scrollbar-demo
width: 98%;
height: 200px;
/*Horizontal scrollbar - set width of overview or make it expand horizontal like below*/
#horizontal-scrollbar-demo .overview
white-space: nowrap;
#horizontal-scrollbar-demo img
height: 180px;
width: auto;
</style>
<script src="jquery-1.9.1.js"></script>
<script src="jquery.mousewheel.min.js"></script>
<script src="jquery.custom-scrollbar.js"></script>
<script type="text/javascript">
$(window).load(function ()
$(".demo").customScrollbar();
);
</script>
</head>
<body>
<h2>Horizontal scrollbar</h2>
<div id="horizontal-scrollbar-demo" class="modern-skin demo">
<img src="images/OOH_Horizontal-A_Page_2_3.jpg" style="padding-right:10px;"/>
<img src="images/OOH_Horizontal-A_Page_3_1_3.jpg" style="padding-right:10px;"/>
<img src="images/OOH_Horizontal-A_Page_4_3.jpg" style="padding-right:10px;"/>
<img src="images/OOH_Horizontal-A_Page_7_3.jpg" style="padding-right:10px;"/>
<img src="images/TomAndJenny_Gap_3.jpg" style="padding-right:10px;"/>
</div>
</body>
</html>
我想要一些平滑的滚动效果，例如http://manos.malihu.gr/jquery-custom-content-scroller/ (mcustomscrollbar)。
【问题讨论】：
您想通过调用.scollToX(x) 以编程方式滚动吗？如果同时按下 shift 键，大多数（可能是所有现代）浏览器都会使用鼠标滚轮执行水平滚动。
对于resize，它有updateOnWindowResize:true这样的选项，mousescroll有什么选项吗？
【参考方案1】：
库中似乎没有配置此选项的选项。但假设您的容器没有垂直滚动条，您可以extend通过更改提供给各种功能的鼠标滚轮增量的顺序来破解插件。
在source，你可以改变
args.unshift(event, delta, deltaX, deltaY);
到
args.unshift(event, delta, deltaY, deltaX);
您也可以在 github 上创建一个问题，要求添加此功能，或者自己提出拉取请求 :-)
【讨论】：
感谢您的回复 andyb，但我仍然遇到同样的问题。 我已经在本地进行了测试，它对我有用。您的容器 only 是否有水平滚动条？你有我可以看到问题的演示吗？ 谢谢！它为我工作。非常感谢。我们还可以在单击和滚动时提高滚动速度吗？现在它在水平方向上逐页移动。 你的意思是按住左键并一起滚动吗？ 像平滑滚动，现在它的效果是跳跃，想要平滑移动。我们能做到吗？以上是关于在 jQuery 自定义滚动条中使用鼠标滚动事件移动自定义滚动条的主要内容，如果未能解决你的问题，请参考以下文章