Плавная прокрутка через перетаскивание

Question

Имею такой код HTML

<div class="ner" id="ner">
    <div class="cat" id="controll">
    <?php
    for ($i = 0; $i != 44; $i++) {
    
    echo '<ul>';
        for ($c = 0; $c != 44; $c++) { 
        echo '<li></li>';   
        }
    echo '</ul>';
    
    }
    ?>
    </div>
</div>

CSS:

.ner {
width: 100%; overflow: hidden; height: 100%;
-webkit-user-select: none;
-moz-user-select: none;
}

.cat {
position: relative;
width: 2202px; height: 2202px;
}

.cat > ul {
display: block;
list-style: none;
width: 100%;
margin: 0px;
padding: 0px;
}

.cat > ul > li {
display: inline-block;
width: 50px;
height: 50px;
border: solid 1px black;
box-sizing: border-box;
margin: 0px;
padding: 0px;
position: relative;
}

это просто контейнер в кнтейнере с сеткой из клеток - содержимое контейнера не влезает в его рамки и уходит в скрытую прокрутку через overflow: hidden;

вот таким скриптом я это проматываю через drag scroll (прокрутка переаскиванием)

$(function() {

  var isDragging = false;

  var mouseIsDown = false;
  var curSX = 0;
  var curSY = 0;

  $control = $("#controll > ul > li");

 
  $control.mousedown(function(e) {
    mouseIsDown = true;
    
    curSX = e.clientX;
    curSY = e.clientY;
    
  });

  $control.mouseup(function(e) {
    isDragging = false;
    mouseIsDown = false;
  });


  $(document).mousemove(function(e) {
     if (mouseIsDown) {
       isDragging = true;
       
       //$("#ner").scrollLeft(curSX - e.pageX); $("#ner").scrollTop(curSY - e.pageY); 1 вариант

     //document.getElementById('ner').scrollBy(curSX - e.pageX, curSY - e.pageY); 2 вариант
      
     }
  });
    
});

в последних строках скрипта есть 2 закомментированных варианта скроллинга которые я использую

вариант через jquery - перетаскивает плавно есть ощущение что ты "укхватил" и тянешь НО каждый новый раз когда начинаешь перетаскивать начальная позиция содержимого сбрасывается на нулевые координаты X-Y т.е. каждый раз перетаскивание начинается контента с дефолтной позиции левого верхнего угла
вариант без jquery - там не сбрасываются координаты как в первом - т.е. ты один раз перетащил и когда перетаскиваешь второй раз ничего не соскакивает, но ощущения перетаскивания нет - мотается очень быстро и нет ощущения "ухватил" - вариант без jq я взял отсюда

подскажите пожалуйста как совместить плюсы(плавно) обоих вариантов без минусов(соскакивает в угол и резко) что я сделал тут не так ведь в примере по ссылке пусть вид кода немного и другой но там работает как надо?

Answer 1

В обоих вариантах идет работа со смещением. То есть вычисляется количество пикселей, на которое нужно сместиться.

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

.scrollBy и так принимает смещение, поэтому для второго варианта не нужно дополнительно ничего прибавлять.

Чтобы корректно рассчитывалось, в конце каждого обработчика нужно сохранить текущее значение координат мышки, чтобы смещение считалось уже от них.

$(function() {
  var isDragging = false;
  var mouseIsDown = false;
  var curSX = 0;
  var curSY = 0;
  var ner = document.getElementById('ner');
  $control = $("#controll");
  $control.mousedown(function(e) {
    mouseIsDown = true;
    curSX = e.pageX;
    curSY = e.pageY;
  });
  $control.mouseup(function(e) {
    isDragging = false;
    mouseIsDown = false;
  });
  $(document).mousemove(function(e) {
    if (mouseIsDown) {
      isDragging = true;
      //$("#ner").scrollLeft($("#ner").scrollLeft() + curSX - e.pageX);
      //$("#ner").scrollTop($("#ner").scrollTop() + curSY - e.pageY); //1 вариант
      ner.scrollBy(curSX - e.pageX, curSY - e.pageY);
      curSX = e.pageX;
      curSY = e.pageY;
    }
  });
});

.ner {
  width: 100%;
  overflow: hidden;
  height: 100%;
  -webkit-user-select: none;
  -moz-user-select: none;
}

.cat {
  position: relative;
  width: 2202px;
  height: 2202px;
}

.cat>ul {
  display: block;
  list-style: none;
  width: 100%;
  margin: 0px;
  padding: 0px;
}

.cat>ul>li {
  display: inline-block;
  width: 50px;
  height: 50px;
  border: solid 1px black;
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
  position: relative;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ner" id="ner">
  <div class="cat" id="controll">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</div>

БЛОГ НА HUSL

Плавная прокрутка через перетаскивание

Ответы (1 шт):