javascript - 使带有文本的 div 从左到右滚动，而不是从上到下滚动。

Question

我目前有一个没有滚动条但可滚动的 1 行 div。当我用鼠标滚轮滚动它时，它从上到下滚动，但我想让它从左到右滚动。

我想我知道如何使用 iframe 来做到这一点，但是否可以在没有 iframe 的情况下做到这一点？

Jsfiddle:http://jsfiddle.net/zfJJX/2/

谢谢!

Answer 1

1. 在要滚动的 div 上添加鼠标滚轮监听器
2. 在该监听器中，使用 e.preventDefault() 和 e.stopPropagation() 阻止默认滚动操作
3. 根据它是向上滚动还是向下滚动，添加或减去 div 的 scrollLeft 属性。

一些未经测试的示例代码:

$("mydiv").onmousewheel = function(e) {
   e.stopPropagation();
   e.preventDefault();

   var delta = 0;
   // normalize the delta
    if (event.wheelDelta) {
        // IE
        delta = event.wheelDelta / 60;
    } else if (event.detail) {
        // ff and chrome
        delta = -event.detail / 2;
    }
    e.target.scrollLeft += delta;
};