Question

标题解释了大部分内容。如何使用鼠标滚动按钮水平滚动div我的div没有垂直滚动，我希望用户使用鼠标滚动。

Answer 1

<html>
  <head>
    <title>Horizontal Scroll Test</title>
    <script type='text/javascript'>
      window.onload = function(e) {
        evt =                   e || window.event;

        var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? 'DOMMouseScroll' : 'mousewheel';

        if(document.attachEvent) {
          document.getElementById('scrollableDiv').attachEvent('on'+mousewheelevt, scroll);
        } else {
          document.getElementById('scrollableDiv').addEventListener(mousewheelevt, scroll, false);
        }
      }


      function scroll(evt) {
        scrollTarget =      evt.currentTarget || evt.srcElement;

        if(scrollTarget.scrollWidth > scrollTarget.offsetWidth) {
          var delta = Math.max(-1, Math.min(1, (evt.wheelDelta || -evt.detail)));
          switch(delta) {
            case 1:
              scrollTarget.scrollLeft -= 32;
              break;

            case -1:
              scrollTarget.scrollLeft += 32;
              break;
          }
        }
      }

    </script>
  </head>


  <body>


    <div id='scrollableDiv' style='width: 256px; height: 256px; position: absolute; overflow: hidden;'>
      <div style='width: 400px;'>
sflgjskfngk lgj s;jg;sfj l;sjg l;fjgo; urgt8904sflgjskfngk lgj s;jg;sfj l;sjg l;fjgo; urgt8904 56 2jgs[09t l45jtw89pt 2n5t,.mh b89p7u 24nm<br>
5t. umb8u or5rtywetr5y  56 sflgjskfngk sflgjskfngk lgj s;jg;sfj l;sjg l;fsflgjskfngk lgj s;jg;sfj l;sjg l;fjgo; urgt8904 56 2jgs[09t l45jt<br>
w89pt 2n5t,.mh b89p7u 24nm5t. umb8u or5rtywetr5y jgo; urgt8904 56 2jgs[09sflgjskfngk lgj s;jg;sfj l;sjg l;fjgo; urgt8904 56 2jgs[09t l45jt<br>
w89pt 2n5t,.mh b89p7u 24nm5t. umb8u or5rtywetr5y t l45jtw89pt 2n5t,sflgjskfngk lgj s;jg;sfj l;sjg l;fjgo; urgt8904 56 2jgs[09t l45jtw89pt <br>
2n5t,.mh b89p7u 24nm5t. umb8u or5rtywetr5y .mh b89p7u 24nm5t. umb8u or5rtywetr5y lgj s;jg;sfj l;sjgsflgjskfngk lgj s;jg;sfj l;sjg l;fjgo; <br>
urgt8904 56 2jgs[09t l45jtw89pt 2n5t,.mh b89p7u 24nm5t. umb8u or5rtywetr5y  l;fjgo; urgt8904 56 2jgs[09t l45jtw89pt 2n5t,.mh b89p7u 24nm5t.<br>
 umb8u or5rtywetr5y 2jgs[09t l45jtw89pt 2n5t,.mh b89p7u 24nm5t. umb8u or5rtywesflgjskfngk lgj s;jg;sfj l;sjg l;fjgo; urgt8904 56 2jgs[09t l<br>
45jtw89pt 2n5t,.mh b89p7u 24nm5t. umb8u or5rtywetr5y tr5y
      </div>
    </div>


  </body>
</html>

Answer 2

这通常是通过JavaScript完成的，虽然我无法提供准确的代码来备份它，但逻辑非常简单：

元素悬停
附加滚动事件处理程序
当滚动事件发生时，准确获取滚动的数量（以px为单位）并阻止事件或向上滚动回原始位置。
在元素上应用一些CSS，例如margin-left，其中包含用户垂直滚动的数量。
（可选）检查元素的右边缘是否到达，如果是，请不要再滚动，这样它就不会从左侧“逃出”页面。

如何在鼠标上下滚动时使div滚动水平

2 个答案: