1

この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)のような滑らかなスクロール効果が必要です。

4

1 に答える 1

1

ライブラリでこれを構成するオプションはないようです。しかし、コンテナーに垂直スクロールバーがないと仮定すると、マウス ホイール デルタがさまざまな関数に提供される順序を変更することで、プラグインを拡張できます。

ソースでは、変更できます

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

に

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

この機能を追加するように github で問題を作成するか、自分でプル リクエストを作成することもできます :-)

于 2013-07-04T09:33:57.537 に答える