如何讓div滾動水平滑鼠上下滾動

標題解釋了大部分內容。我怎樣才能水平滾動div與鼠標滾動按鈕我的div沒有垂直滾動，我想用戶利用鼠標滾動。如何讓div滾動水平滑鼠上下滾動

2013-09-22 Shanker Paudel

可以使用例如，[這是我的代碼（http://stackoverflow.com/a/18791958/1169519）。 – Teemu

感謝您提出這個問題。我一直想要寫一個水平滾動功能，但完全忘了它，直到我看到這篇文章。 –

<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>

來源

2013-09-22 21:48:04

這通常是用JavaScript做，雖然我不能提供確切的代碼來支持它的邏輯很簡單：

元素上懸停
附上一個滾動的事件處理程序
發生滾動事件時，請確切滾動（以像素爲單位）多少，並阻止事件或向回滾動到原始位置。
在元素上應用一些CSS，例如margin-left，其中垂直滾動量爲滾動量。
（可選）檢查元素的右邊緣是否到達，如果是，則不要再向前滾動，以免它從左側「跳出」頁面。

來源

2013-09-22 19:04:40

如何讓div滾動水平滑鼠上下滾動

回答

相關問題