Question

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

Answer 1

不，没有。

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

Answer 2

使用它。 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();

   });

});

请注意我说“像这样的东西”，你需要修改和/或添加代码以获得你想要的结果，这只是让你走上正确的道路

Answer 3

虽然固定滚动量适用于箭头和条形，但我是这样做的。如果您在浏览器中加载它，您将看到左侧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>

单击HTML中的滚动条箭头时滚动的像素数

3 个答案: