Блог

Главная - Вопросы по программированию - мне нужен список с вертикальной автопрокруткой с движением мыши с использованием Java script jquery

мне нужен список с вертикальной автопрокруткой с движением мыши с использованием Java script jquery

#javascript #jquery

#javascript #jquery

Вопрос:

Мне нужна ваша помощь в том, чтобы элементы списка можно было перемещать с помощью движения мыши. если пользователь просто перемещает курсор мыши вертикально вверх по списку, то список должен прокручиваться вниз, а если пользователь перемещает курсор мыши вниз по списку, то список должен прокручиваться вверх, и если пользователь перемещает курсор мыши по списку, то список должен прокручиваться вверх, и если пользователь 

 <body>

<ul style="height:200px; width:18%;overflow:hidden; overflow-y:scroll;">
        <li>Henry Christensen</li>
        <li>Imelda Silva</li>
        <li>Marah Mueller</li>
        <li>Holly Fitzpatrick</li>
        <li>Lamar Flynn</li>
        <li>Jameson Davidson</li>
        <li>Harper Lynn</li>
        <li>Keith Woods</li>
        <li>Cally Dominguez</li>
        <li>Carter Gould</li>
        <li>Brenna Sutton</li>
        <li>Robert Vang</li>
        <li>Lane Shepard</li>
        <li>Ila Shepard</li>
        <li>Madaline Mccarthy</li>
        <li>Raya King</li>
        <li>Tara Schroeder</li>
        <li>Paloma Bryan</li>
        <li>Trevor Heath</li>
        <li>Raymond Vega</li>
        <li>Nyssa Mcleod</li>
        <li>Zachary Deleon</li>
        <li>Guy Morales</li>
        <li>Gannon Kline</li>
        <li>Clare Floyd</li>
      </ul>
</body>

Ответ №1:

Приведенный ниже код прослушивает событие перемещения мыши внутри элемента и проверяет разницу между текущим и последним значениями мыши Y. Он использует это для прокрутки с помощью scrollTop функции.

mouseleave Прослушиватель удаляет сохраненное значение мыши Y, что означает, что положение прокрутки не будет фиксироваться на том, что было в последний раз, когда ваша мышь покидает и возвращается.

Надеюсь, это поможет!

 var ly;

$(function() {
  $("#list").mousemove(function(e) {
      if (ly) {
        $("#list").scrollTop($("#list").scrollTop() ly-e.clientY);
        ly = e.clientY;
      } else {
        ly = e.clientY;
      };
  });
  $("#list").mouseleave(function() {
    ly = null;
  });
});  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>

<ul id="list" style="height:200px; width:18%;overflow:hidden; overflow-y:scroll;">
        <li>Henry Christensen</li>
        <li>Imelda Silva</li>
        <li>Marah Mueller</li>
        <li>Holly Fitzpatrick</li>
        <li>Lamar Flynn</li>
        <li>Jameson Davidson</li>
        <li>Harper Lynn</li>
        <li>Keith Woods</li>
        <li>Cally Dominguez</li>
        <li>Carter Gould</li>
        <li>Brenna Sutton</li>
        <li>Robert Vang</li>
        <li>Lane Shepard</li>
        <li>Ila Shepard</li>
        <li>Madaline Mccarthy</li>
        <li>Raya King</li>
        <li>Tara Schroeder</li>
        <li>Paloma Bryan</li>
        <li>Trevor Heath</li>
        <li>Raymond Vega</li>
        <li>Nyssa Mcleod</li>
        <li>Zachary Deleon</li>
        <li>Guy Morales</li>
        <li>Gannon Kline</li>
        <li>Clare Floyd</li>
      </ul>
</body>