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

Question

Title explains most of it. 标题说明了大部分内容。 How can i scroll a div horizontally with mouse scroll button my div do not have a vertical scroll and i want user to utilize mouse scroll. 如何使用鼠标滚动按钮水平滚动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

This is usually done with JavaScript and although I can't provide the exact code to back it up, the logic is pretty simple: 这通常是用JavaScript完成的，尽管我无法提供确切的代码来备份它，但逻辑很简单：

On element hover 在元素悬停时
Attach a scroll event handler 附加滚动事件处理程序
When a scroll event occurs, get exactly how much was scrolled (in px) and either prevent the event or scroll back up to the original position. 发生滚动事件时，请准确获取滚动量（以像素为单位），然后阻止该事件或向上滚动到原始位置。
Apply some CSS such as margin-left on the element with the amount of scroll the user did vertically. 应用一些CSS，例如在元素上添加margin-left以及用户垂直滚动的数量。
(Optional) Check if the element's right edge is reached and if it is, don't scroll any further so it doesn't "escape" out the page from the left side. （可选）检查是否到达元素的右边缘，如果没有，则不要再滚动，以免它从左侧“退出”页面。

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

问题描述

2 个解决方案

解决方案1
3 已采纳 2013-09-22 21:48:04

解决方案2
0 2013-09-22 19:04:40

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

问题描述

2 个解决方案

解决方案1 3 已采纳 2013-09-22 21:48:04

解决方案2 0 2013-09-22 19:04:40

解决方案1
3 已采纳 2013-09-22 21:48:04

解决方案2
0 2013-09-22 19:04:40