在div中使用鼠标滚轮水平滚动 [英] Horizontal scrolling with mouse wheel in a div

问题描述

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

How to scroll horizontal in na div with mouse wheel, or drag with jquery?

我试过可以拖动，但在我的代码中它没有用.

I've tried draggable, but in my code it isn't useful.

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

Now I've got a horizontal scrollbar. Is there a posibility to scroll the content in my div using the mouse wheel?

推荐答案

尝试使用鼠标滚轮进行水平滚动.这是纯 JavaScript:

Try this for horizontal scrolling with mouse wheel. This is pure 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 作为目标元素:https://taufik-nurrohman.github.io/dte-project/full-page-horizo​​ntal-scrolling.html

Here’s a demo, but with document.body and window as a targetted element: https://taufik-nurrohman.github.io/dte-project/full-page-horizontal-scrolling.html

这篇关于在div中使用鼠标滚轮水平滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！