горизонтальная прокрутка по колесу мыши на элементе 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, но дельта всегда равна -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 имеет только горизонтальную полосу прокрутки, то колесо мыши будет использовать его. Я предполагаю, что вы применяете стиль к элементу, который мешает ему отображать полосы прокрутки вообще, поэтому колесо не работает. В качестве стартера разрешите браузеру отображать полосу прокрутки, чтобы увидеть, работает ли она тогда.

Вещи запутаны, если родительский контейнер имеет полосу прокрутки, поэтому старайтесь избегать этого.

[EDIT] Вы также должны посмотреть на этот ответ: https://stackoverflow.com/a/22518932/34088 как связать с необработанным событием и узнать дельту. Обратите внимание, что этот код сильно зависит от браузера.

Я думаю, что основная проблема заключается в том, что узел DOM не имеет полосы прокрутки: если его нет, браузер не сможет его прокрутить, поэтому событие mousewheel всегда будет сообщать «Я переместил элемент на 0 пикселей». enter code here

Похожие:

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