So I am trying to create simple auto scroll gallery with the possibility of changing direction(up and down)
I can't understand why when "auto scroll" reaches the top of the page stuck. Same thing happens when it reaches to bottom.
Here is my example: https://infinite-scroll-gallery.tesladesignstudio.com/
let target = 1;
let reverse = false;
function scroll(){
target = window.scrollY;
if(target <= 0){
target = (content.offsetHeight / 2) - 10;
window.scrollTo(0, target);
document.getElementById("scrollLoct").innerHTML = "target UP";
}else if( target >= content.offsetHeight / 2){
target = 10;
window.scrollTo(0, target);
document.getElementById("scrollLoct").innerHTML = "target DOWN";
}
if(reverse){
target --
}else{
target++
}
window.scrollTo(0, target)
scrollable.style.transform = `translateY(-${target}px)`;
requestAnimationFrame(scroll)
}
scroll();
function scrollDetect(){
var lastScroll = 0;
window.onscroll = function() {
let currentScroll = document.documentElement.scrollTop || document.body.scrollTop; // Get Current Scroll Value
if (currentScroll > 0 && lastScroll <= currentScroll){
reverse = false;
lastScroll = currentScroll;
document.getElementById("scrollLoc").innerHTML = "Scrolling DOWN";
}else{
reverse = true;
lastScroll = currentScroll;
document.getElementById("scrollLoc").innerHTML = "Scrolling UP";
}
};
}
scrollDetect()