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

Question

我尝试在用户使用鼠标滚轮时在 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>

我在我的 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如何绑定(bind)到原始事件并找出增量。请注意，此代码在很大程度上依赖于浏览器。

我认为主要问题是如果DOM节点没有滚动条:如果没有，那么浏览器就不能滚动它，所以mousewheel事件会一直报“I moved the element 0 像素”。在此处输入代码

相关:

• > https://github.com/jquery/jquery-mousewheel/