Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

scrollbar.scrollTo easing not working #516

Closed
1 task done
zippw opened this issue Feb 2, 2023 · 12 comments
Closed
1 task done

scrollbar.scrollTo easing not working #516

zippw opened this issue Feb 2, 2023 · 12 comments

Comments

@zippw
Copy link

zippw commented Feb 2, 2023

Checks

  • Not a duplicate.

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
Copy link
Owner

idiotWu commented Feb 2, 2023

It is working on my side. Any online demos?

image

@zippw
Copy link
Author

zippw commented Feb 2, 2023

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
Copy link
Owner

idiotWu commented Feb 2, 2023

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
Copy link
Author

zippw commented Feb 2, 2023

Sky.Tools.-.Home.-.Google.Chrome.2023-02-02.21-49-27.mp4

@zippw
Copy link
Author

zippw commented Feb 2, 2023

Sky.Tools.-.Home.-.Google.Chrome.2023-02-02.21-52-50.mp4

This works when I'm not using easing

@idiotWu
Copy link
Owner

idiotWu commented Feb 2, 2023

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
Copy link
Author

zippw commented Feb 2, 2023

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

@idiotWu
Copy link
Owner

idiotWu commented Feb 2, 2023

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

@zippw
Copy link
Author

zippw commented Feb 2, 2023

It returns NaN

@idiotWu
Copy link
Owner

idiotWu commented Feb 2, 2023

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

@idiotWu
Copy link
Owner

idiotWu commented Feb 2, 2023

The one you got from npm is totally a different package: danro/easing-js#5

@zippw
Copy link
Author

zippw commented Feb 2, 2023

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

@idiotWu idiotWu closed this as completed Feb 2, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants