jquery：鼠标滚轮上的动画列表scrollLeft/scrollRight答案

【问题标题】：jquery : animate list scrollLeft/scrollRight on mouse wheeljquery：鼠标滚轮上的动画列表scrollLeft/scrollRight
【发布时间】：2015-02-24 17:55:50
【问题描述】：

当用户使用鼠标滚轮时，我有以下代码可以左右滚动。事件绑定得很好，因为当用户尝试滚动时，我转到了 JS 代码，但代码一直没有效果。

<div id="contact_list">
    <ul id="contact_list_ul">
        <li>img1</li>
        <li>img2</li>
        <li>img3</li>
        <li>img4</li>
        <li>img5</li>
        <li>img6</li>
        <li>img7</li>
        <li>img8</li>
        <li>img9</li>
    </ul>
</div>

CSS :（我使用overflow-x是因为我想隐藏滚动条）

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

左右滚动的JS代码：

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

【问题讨论】：

你添加了鼠标滚轮库吗？
然后尝试使用if(event.deltaY < 0) 或其他方式。
@Jai 我试过了，但没有任何变化。即使在 chrome 调试器中，当我在调试 $("#contact_list_ul").animate({scrollRight : '-=200'}, 'slow'); 中放入以下行时，滚动也没有完成。有错吗？
刚刚发了答案看看吧。

标签： javascript jquery scroll mouseevent

【解决方案1】：

我猜 jquery 中没有名为 scrollRight 的方法，所以我认为应该是 scrollLeft。

试试这个：

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

    #contact_list ul {
       list-style-type: none;
       white-space: nowrap;
       overflow-x: hidden;
      width:400px;
      border:solid 1px red;
    }
#contact_list ul li{
width:200px; display:inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.min.js"></script>
    <div id="contact_list">
    	<ul id="contact_list_ul">
            <li>img1</li>
            <li>img2</li>
            <li>img3</li>
            <li>img4</li>
            <li>img5</li>
            <li>img6</li>
            <li>img7</li>
            <li>img8</li>
            <li>img9</li>
        </ul>
    </div>

【讨论】：