Имею такой код 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 я взял отсюда
подскажите пожалуйста как совместить плюсы(плавно) обоих вариантов без минусов(соскакивает в угол и резко) что я сделал тут не так ведь в примере по ссылке пусть вид кода немного и другой но там работает как надо?
window
, а у тебя на конкретном элементе