我正在使用这个https://github.com/mzubala/jquery-custom-scrollbar/插件来自定义滚动条。它在所有浏览器中都能正常工作。
问题是,我想通过使用鼠标滚动事件来移动水平滚动条。任何人都可以帮忙吗?请!
索引.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)。