[英]Javascript: horizontal autoscroll
If the user is dragging an element in container close to horizontal edge, I need to autoscroll container to the end in respective direction. 如果用户拖动容器中靠近水平边缘的元素,则需要将容器在相应方向上自动滚动到末端。
How the code below can be improved? 下面的代码如何进行改进?
const scrollSpeed = 10;
const scrollSensitivity = 10;
let scrollInterval = null;
const scrollContainer = document.getElementById("scrollContainer");
scrollContainer.addEventListener("touchmove", autoScroll);
function disableAutoScrolling() {
clearInterval(scrollInterval);
scrollInterval = null;
}
function autoScroll(event) {
// pointer offset
const offsetX = event.targetTouches[0].pageX;
const offsetY = event.targetTouches[0].pageY;
// container offset relative to viewport
const rect = scrollContainer.getBoundingClientRect();
// pointer is over right / left edge of a scrollContainer
const SCROLL_RIGHT = ( rect.width + rect.left - offsetX <= scrollSensitivity ) && ( offsetY > rect.top );
const SCROLL_LEFT = ( offsetX - rect.left <= scrollSensitivity ) && ( offsetY > rect.top );
disableAutoScrolling();
// the container should scroll
if (SCROLL_RIGHT) {
scrollInterval = setInterval(() => {
scrollContainer.scrollLeft += scrollSpeed;
}, 10);
}
if (SCROLL_LEFT) {
scrollInterval = setInterval(() => {
scrollContainer.scrollLeft -= scrollSpeed;
}, 10);
}
}
Thanks for your help. 谢谢你的帮助。
I do not know if the current code works, but here is a more organized version. 我不知道当前的代码是否有效,但这是一个更有条理的版本。
const scroller={
speed: 10,
sensitivity: 10,
container: document.getElementById("scrollContainer"),
rect: scroller.container.getBoundingClientRect(),
interval: null,
offsetX: 0,
offsetY: 0
};
scroller.container.addEventListener("touchmove",function(e){
clearInterval(scroller.interval);
scroller.interval = null; // May not be needed
// pointer offset
scroller.offsetX = e.targetTouches[0].pageX;
scroller.offsetY = e.targetTouches[0].pageY;
// the container should scroll
// pointer is over right / left edge of a scroller.container
if((scroller.rect.width+scroller.rect.left-scroller.offsetX<=scroller.sensitivity)&&(scroller.offsetY>scroller.rect.top))scroller.interval=setInterval(()=>{scroller.container.scrollLeft+=scroller.speed;},10);
if((scroller.offsetX-scroller.rect.left<=scroller.sensitivity)&&(scroller.offsetY>scroller.rect.top))scroller.interval=setInterval(()=>{scroller.container.scrollLeft-=scroller.speed;},10);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.