1

我正在使用这个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)。

4

1 回答 1

1

库中似乎没有配置此选项的选项。但是假设您的容器没有垂直滚动条，您可以通过更改提供给各种功能的鼠标滚轮增量的顺序来扩展hack 插件。

在源代码中，您可以更改

args.unshift(event, delta, deltaX, deltaY);

至

args.unshift(event, delta, deltaY, deltaX);

您还可以在 github 上创建一个问题，要求添加此功能，或者自己提出拉取请求 :-)

于 2013-07-04T09:33:57.537 回答