2

有没有办法控制当用户单击滚动条的箭头（而不是滑动滚动条本身）时，HTML 元素的内容滚动的像素数，也许使用 CSS 和 Javascript？

4

3 回答 3

1

不，没有。

也就是说，我相当确定单击滚动箭头将触发单个onscroll事件，因此您可能会限制每个onscroll触发事件允许的滚动量，但这意味着您只能减少默认量，您不能增加它。

于 2012-07-18T22:03:20.823 回答
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 回答
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 回答