2

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()
Danijel J.
  • 43
  • 5

0 Answers0