Javascript 在div元素上的鼠标滚轮上水平滚动

当用户使用鼠标滚轮时，我尝试在div元素上创建一个水平滚动

以下是一个屏幕截图：

以下是我所在部门的代码：

<div id="contact_list">
            <ul>
                <li>
                    <img src="/img/img_example.jpg" class="img_contact_area" />
                    <div class="contact_presence"></div>
                </li>
                <li>
                    <img src="/img/img_example.jpg" class="img_contact_area" />
                    <div class="contact_presence"></div>
                </li>
                <li>
                    <img src="/img/img_example.jpg" class="img_contact_area" />
                    <div class="contact_presence"></div>
                </li>
                <li>
                    <img src="/img/img_example.jpg" class="img_contact_area" />
                    <div class="contact_presence"></div>
                </li>
                <li>
                    <img src="/img/img_example.jpg" class="img_contact_area" />
                    <div class="contact_presence"></div>
                </li>
                <li>
                    <img src="/img/img_example.jpg" class="img_contact_area" />
                    <div class="contact_presence"></div>
                </li>
                <li>
                    <img src="/img/img_example.jpg" class="img_contact_area" />
                    <div class="contact_presence"></div>
                </li>
                <li>
                    <img src="/img/img_example.jpg" class="img_contact_area" />
                    <div class="contact_presence"></div>
                </li>
                <li>
                    <img src="/img/img_example.jpg" class="img_contact_area" />
                    <div class="contact_presence"></div>
                </li>
                <li>
                    <img src="/img/img_example.jpg" class="img_contact_area" />
                    <div class="contact_presence"></div>
                </li>
                <li>
                    <img src="/img/img_example.jpg" class="img_contact_area" />
                    <div class="contact_presence"></div>
                </li>
                <li>
                    <img src="/img/img_example.jpg" class="img_contact_area" />
                    <div class="contact_presence"></div>
                </li>
                <li>
                    <img src="/img/img_example.jpg" class="img_contact_area" />
                    <div class="contact_presence"></div>
                </li>
                <li>
                    <img src="/img/img_example.jpg" class="img_contact_area" />
                    <div class="contact_presence"></div>
                </li>
        </div>

---

如果

联系人列表

只有一个水平滚动条，则鼠标滚轮将使用它。我的猜测是，您对元素应用了一种样式，从而阻止它显示滚动条，这就是控制盘无法工作的原因。作为启动程序，允许浏览器呈现滚动条，以查看其是否工作

如果父容器有滚动条，事情就会变得混乱，所以请尽量避免

[编辑]您还应该看看这个答案：如何绑定到原始事件并找出增量。请注意，此代码严重依赖于浏览器

我认为主要的问题是如果DOM节点没有滚动条：如果没有滚动条，那么浏览器就无法滚动它，因此

鼠标滚轮

事件将始终报告“我将元素移动了0像素”。

在此处输入code

相关的：

---

你在

delta

和

deltaX

中得到了什么？@AaronDigulla delta=1，deltaX=-0I添加了css，你能看看有什么问题吗？这很奇怪<代码>溢出-x：自动应该为您提供一个水平滚动条。

$("#contact_list").mousewheel(function(event, delta, deltaX, deltaY) {
    var o = '';
    if (deltaY > 0){
                      $("#contact_list").animate({scrollRight : '-=200'}, 'slow');
                              }
    else if (deltaY < 0){
                              $("#contact_list").animate({scrollRight :'+=200'}, 'slow');
                 }

});

#contact_list ul {
    list-style-type: none;
    white-space:nowrap;
    overflow-x:auto;
}

#contact_list ul li {
    display:inline;
}