2

Имею такой код 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 закомментированных варианта скроллинга которые я использую

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

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

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

3
  • по ссылке не заметно никакого мотания
    – Grundy
    21 авг 2020 в 23:01
  • @Grundy да меня вот тоже в тупик поставило что в примере работает, а у меня нет, спасибо за ответ, все работает теперь))
    – dantelol
    22 авг 2020 в 10:55
  • Обрати внимание, что по ссылке только события window, а у тебя на конкретном элементе
    – Grundy
    22 авг 2020 в 11:52

1 ответ 1

1
+150

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

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

.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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.