Question

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

以下是截图：

enter image description here

这是我的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>

我在我的JS中使用鼠标滚轮插件：

$("#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');
                 }

});

但是没有效果，滚动检测得很好，因为我去了JS代码，但delta总是等于-1 ..

我的代码或任何其他解决方案是否在我的元素上进行水平滚动有问题？

这是CSS：

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

#contact_list ul li {
    display:inline;
}

Answer 1

如果contact_list只有一个水平滚动条，那么鼠标滚轮就会使用它。我的猜测是你将一个样式应用到元素上，这样就完全无法显示滚动条，这就是轮子无法工作的原因。作为入门者，允许浏览器呈现滚动条以查看它是否有效。

如果父容器有滚动条，事情会变得混乱，所以尽量避免这种情况。

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

我认为主要问题是如果DOM节点没有滚动条：如果没有滚动条，则浏览器无法滚动它，因此mousewheel事件将始终报告＆＃34;我感动元素乘以0像素＆＃34;。enter code here

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

1 个答案: