html - 在div中使用鼠标滚轮进行水平滚动

Question

如何用鼠标在na div中水平滚动，或用jquery拖动？



我尝试过可拖动的代码，在我的代码中没用。

现在，我有了一个水平滚动条。是否可以使用鼠标滚轮滚动div中的内容？

Answer 1

尝试使用鼠标滚轮进行水平滚动。这是纯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