Question

但是当用户使用鼠标滚轮向上和向下滚动时，它会向左和向右滚动div。

Answer 1

你必须使用JavaScript。此页面详细介绍了不同的事件以及如何使用它们：

Answer 2

我用原型来挂钩事件。这是我可以做的最简单的方法是使用鼠标滚轮水平滚动div。如果你将溢出保持为自动/滚动/隐藏并不重要。请在不同的浏览器中试用。我不确定其他浏览器中的事件。我主要在IE中做这个，因为我在IE中编码。

<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js type="text/javascript"></script>
<div style="width:100px;height:150px;overflow:auto;" id="myDiv">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>

<script language="javascript">
    function handleScroll(e) {
        var delta = 0;
        var upScroll = true;

        if (!e) e = window.event;
        if (event.wheelDelta) {
            delta = event.wheelDelta / 120;
        } else if (event.detail) { delta = -event.detail / 3; }

        // increments or decrements the scroll left
        var div =  $('myDiv');
        div.scrollLeft = (div.scrollLeft + Math.round(delta) + ((delta > 0) ? 50 : -50));
    }

    // hook events
    Event.observe($('myDiv'), "mousewheel", handleScroll, false);
    Event.observe($('myDiv'), "DOMMouseScroll", handleScroll, false); // Firefox
</script>

如何制作可以使用鼠标滚轮向左/向右滚动的div？

2 个答案: