2

おそらく CSS と Javascript を使用して、(スクロールバー自体をスライドさせるのではなく) ユーザーがスクロールバーの矢印をクリックしたときに、HTML 要素のコンテンツがスクロールされるピクセル数を制御する方法はありますか?

4

3 に答える 3

1

いいえ、ありません。

とは言っても、スクロール矢印を 1 回クリックするだけで 1 つのonscrollイベントが発生することは間違いないので、発生するイベントごとに許可されるスクロールの量を制限できる可能性がありますがonscroll、それは、デフォルトの量を減らすことしかできないことを意味します。それを増やします。

于 2012-07-18T22:03:20.823 に答える
1

固定スクロール量は矢印とバーの両方に適用されますが、これは私が行う方法です。これをブラウザーにロードすると、左側の div が一定のピクセル数だけスクロールするため、黒いバーが常に整列されていることがわかります。右側の div には通常のスクロールがあり、黒いバーがずれています。

<html>
<head>
    <style>
        .scroller { 
            height: 220px;
            width: 120px;
            overflow: auto;
            display: inline-block;
            margin-right: 40px;
        }

        .item {
            height: 20px;
            margin-bottom: 2px;
            width: 100px;
            background-color: black;
            color: white;
        }
    </style>
    <script>
        function init() {
            var scroller1 = document.getElementById("scroller1");
            initScroller(scroller1);
            scroller1.addEventListener("scroll", onScroll);

            var scroller2 = document.getElementById("scroller2");
            initScroller(scroller2);
        }

        function initScroller(node) {
            for (var i = 0; i < 40; i++) {
                var elem = document.createElement("div");
                elem.setAttribute("class", "item");
                elem.innerHTML = "item " + i;
                node.appendChild(elem);
            }
        }

        var lastScroll = 0;
        var deltaPerScroll = 22;
        function onScroll(evt) {
            var node = document.getElementById("scroller1");
            if (node.scrollTop != lastScroll) {
                var delta = node.scrollTop < lastScroll ? -deltaPerScroll : deltaPerScroll;
                node.scrollTop = lastScroll + delta;
            }
            lastScroll = node.scrollTop;
        }
    </script>
</head>
<body onload="init();">
    <div id="scroller1" class="scroller"></div>
    <div id="scroller2" class="scroller"></div>
</body>
</html>
于 2015-02-12T22:49:32.187 に答える
1

これを使って。http://archive.plugins.jquery.com/project/mousewheel

JQuery とマウス ホイール プラグインを読み込みます。

  <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
  <script type='text/javascript' src='/js/jquery.mousewheel.min.js'></script>

次に、次のようにします。

$(function() {

   $("body").mousewheel(function(event, delta) {

  this.scrollLeft -= (delta * 30);

  event.preventDefault();

   });

});

「このようなもの」と言ったことを理解してください。目的の結果を得るには、コードを変更および/または追加する必要があります。これは正しい道を歩んでいるだけです。

于 2012-07-18T22:10:43.847 に答える