idiotWu / smooth-scrollbar

Customizable, Extendable, and High-Performance JavaScript-Based Scrollbar Solution.
https://idiotwu.github.io/smooth-scrollbar/
MIT License
3.32k stars 383 forks source link

scrollbar.scrollTo easing not working #516

Closed zippw closed 1 year ago

zippw commented 1 year ago

Checks

Version

8.8.1

Description

Summary Hello! When I click on button, scrollbar should scroll to the top

SmoothScrollbar.use(ScrollTriggerPlugin, SoftScrollPlugin);

const scrollbar = SmoothScrollbar.init(document.querySelector('.scroller'), {
    renderByPixels: false,
    damping: 0.075,
    plugins: {
        SoftScroll: {
            x: false
        },
    }
});
scrollbar.track.xAxis.element.remove();

document.getElementById('scroll_to_top').addEventListener('click', function () {
    scrollbar.scrollTo(0, 0, 2000, {
        callback: () => console.log('done!'),
        easing: easing.easeOutQuint
    });
})

When I use easing-js, scrollbar stops working so I can't scroll at all (scrollTo also not work) If I remove easing, it works properly. Expected Behavior After clicking on a button, scrollbar supposed to scroll on top with easing

I love your project and I hope you answer me

Steps to Reproduce

?

Online Demo

No response

idiotWu commented 1 year ago

It is working on my side. Any online demos?

image
zippw commented 1 year ago

Unfortunately, I won't be able to show this separately, but what conditions should there be for proper operation? Maybe css overflow... The scrollbar works great. Could there be a problem with gsap ScrollTrigger? (there is a plugin). If I use the easing parameter, the scrollbar will intercede on the spot and nothing can be done with it

idiotWu commented 1 year ago

We are not able to figure out the issue unless we see a demo. However, if you don’t need the callback, you can try scrollbar.setMomentum(-scrollbar.offset.x, -scrollbar.offset.y) to scroll to top.

zippw commented 1 year ago

https://user-images.githubusercontent.com/78442160/216421714-1f987c94-f952-46e0-b5b9-789b26af02bb.mp4

zippw commented 1 year ago

https://user-images.githubusercontent.com/78442160/216422289-c88307c1-2725-4741-b946-e55f99de11c5.mp4

This works when I'm not using easing

idiotWu commented 1 year ago

One guess is that something is wrong with the easing-js you are using—it seems to return a NaN and thus break the scrollbar.

zippw commented 1 year ago

how can i see some debug stuff? I mean, there are no errors at all, easing.easeOutQuint returns function

idiotWu commented 1 year ago

In your console (or in the code), type easing.easeOutQuint(0.5) and see if it returns a number.

zippw commented 1 year ago

It returns NaN

idiotWu commented 1 year ago

Alright, so I guess you are using the wrong easing-js. Our scrollbar supports this one: https://github.com/danro/easing-js

idiotWu commented 1 year ago

The one you got from npm is totally a different package: https://github.com/danro/easing-js/issues/5

zippw commented 1 year ago

Wow! Thank you very much! I would never have guessed just by downloading another library by the same name heh