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

Question

当用户使用鼠标滚轮时，我有以下代码向左/向右滚动。事件绑定很好，因为我在用户尝试滚动时转到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：（我用溢出-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'); 
    } 
}); 

Answer 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"> 
 
    \t <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>