用鼠標滾輪在div中水平滾動

Question

如何滾動na div中的水平用鼠標whell或用jquery拖動？

---

我試過可拖動的，byt在我的代碼中沒有用。

現在我有一個水平滾動條。用鼠標滾輪滾動div中的內容有沒有可能性？

Answer 1

幾天前寫了這個插件。

$.fn.hScroll = function(options) 
{ 
    function scroll(obj, e) 
    { 
    var evt = e.originalEvent; 
    var direction = evt.detail ? evt.detail * (-120) : evt.wheelDelta; 

    if(direction > 0) 
    { 
     direction = $(obj).scrollLeft() - 120; 
    } 
    else 
    { 
     direction = $(obj).scrollLeft() + 120; 
    } 

    $(obj).scrollLeft(direction); 

    e.preventDefault(); 
    } 

    $(this).width($(this).find('div').width()); 

    $(this).bind('DOMMouseScroll mousewheel', function(e) 
    { 
    scroll(this, e); 
    }); 
} 

立即嘗試與

$(document).ready(function(){ 
    $('#yourDiv').hScroll(); 
}); 

的div子元件的寬度應該比母體更寬。

像4000像素或東西。

<div id="yourDiv"> 
     <div style="width: 4000px;"></div> 
</div> 

Answer 2

試試用鼠標滾輪水平滾動。這是純JavaScript：

(function() { 
    function scrollHorizontally(e) { 
     e = window.event || e; 
     var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))); 
     document.getElementById('yourDiv').scrollLeft -= (delta*40); // Multiplied by 40 
     e.preventDefault(); 
    } 
    if (document.getElementById('yourDiv').addEventListener) { 
     // IE9, Chrome, Safari, Opera 
     document.getElementById('yourDiv').addEventListener("mousewheel", scrollHorizontally, false); 
     // Firefox 
     document.getElementById('yourDiv').addEventListener("DOMMouseScroll", scrollHorizontally, false); 
    } else { 
     // IE 6/7/8 
     document.getElementById('yourDiv').attachEvent("onmousewheel", scrollHorizontally); 
    } 
})(); 

這裏有一個演示，但document.body和window爲針對性的元素：http://rawgit.com/tovic/dte-project/master/full-page-horizontal-scrolling.html

Answer 3

我已經通過@匿名生菜改寫從答案代碼。元素的寬度重新計算會被忽略，因爲它是不必要的，有時也是不可取的。 這也提供了附加功能將scroll-amount的px傳遞給插件。

使用方法如下：

$(document).ready(function(){ 
    $('#your_div').hScroll(100); // You can pass (optionally) scrolling amount 
}); 

這裏去升級插件jquery.hscroll.js：

jQuery(function ($) { 
    $.fn.hScroll = function (amount) { 
     amount = amount || 120; 
     $(this).bind("DOMMouseScroll mousewheel", function (event) { 
      var oEvent = event.originalEvent, 
       direction = oEvent.detail ? oEvent.detail * -amount : oEvent.wheelDelta, 
       position = $(this).scrollLeft(); 
      position += direction > 0 ? -amount : amount; 
      $(this).scrollLeft(position); 
      event.preventDefault(); 
     }) 
    }; 
}); 

這裏是相同jquery.hscroll.min.js的縮小的版本：

jQuery(function(e){e.fn.hScroll=function(l){l=l||120,e(this).bind("DOMMouseScroll mousewheel",function(t){var i=t.originalEvent,n=i.detail?i.detail*-l:i.wheelDelta,o=e(this).scrollLeft();o+=n>0?-l:l,e(this).scrollLeft(o),t.preventDefault()})}}); 

這裏是JSFiddle

Answer 4

我想對@Taufik給出的答案稍加改進。

在es2015模塊的上下文：

const el = document.querySelector('#scroller'); 

function scrollHorizontally(e) { 
    e = window.event || e; 
    e.preventDefault(); 
    el.scrollLeft -= (e.wheelDelta || -e.detail); 
} 

function init() { 
    if (!el) { 
    return; 
    } 

    if (el.addEventListener) { 
    el.addEventListener('mousewheel', scrollHorizontally, false); 
    el.addEventListener('DOMMouseScroll', scrollHorizontally, false); 
    } else { 
    el.attachEvent('onmousewheel', scrollHorizontally); 
    } 
} 

export default init; 

主要區別在於：el.scrollLeft -= (e.wheelDelta || -e.detail);

使用e.wheelData直接在滾動偏移量意味着我們可以有慣性，從而使滾動可以逐漸減慢。我發現這對我很好。

只需在您的代碼中使用就像這樣（假設上面的代碼位於一個名爲的滾動文件中）。JS）：

import scroller from './scroller.js'; 
scroller();