用鼠标滚轮在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();