CODEWITHSUNDEEP
javascriptjqueryhtml
user10340803
user10340803

Reputation:

Animate() scroll has an unnecessary delay

I use both nextButton and previousButton to scroll through the 6 scenes that are on screen.

When I hit the bottom of the document and press nextButton, I go to the top. The other way around for previousButton. So it continuously loops.

It also takes my scroll position into account, but I set overflow to hidden for now.

I use animate({scrollTop}) to get the scroll effect i want, however, adding a duration to it doesn't make the animation act on that speed. It adds a delay.

if i would add, for instace 4000 next to the scrollTop function, to indicate that it should do a 4-second scroll, it will wait out those 4 seconds instead and then scroll to the next/previous scene on regular speed.

to give an example of one of the button's code :

$("#previousButton").on('click', function(e) {
     e.preventDefault();

     $('.scenes').each(function() {
        if ($(this).isInViewport()) {
            prevSlide = $(this).prev();
        }
    });


//goes to last scene to create scrolling loop
    if(prevSlide.length == 0) {
  prevSlide = $('.scenes').last();
    }


        $("html, body").animate ({scrollTop: $(prevSlide).offset().top}, 10);
});

currently i set the duration to 10 to make sure there is minimal delay before the animation happens, but of course this isn't what I want.

What's causing this delay on how can it be fixed? or is this normal behaviour? Reason that i ask this because certain examples on w3 schools seem to animate totally fine with a set-duration, unless the changing of width/height and such is completely different compared scrollTop

My codepen for the full code

Upvotes: 2

Views: 983

Answers (1)

toffler
toffler

Reputation: 1233

Its because of your css scroll-behavior:smooth;

Remove this part and it works.

Upvotes: 2

Related Questions