After a few seconds, couldn't scrolling with nextjs

[mattun]

I used asscroll with nextjs 12.3.0 When loaded, can move, but after a few seconds, it couldn't scrolling

https://user-images.githubusercontent.com/113253/189880393-1f2953f7-6200-4b48-a361-be1d8ac35454.mov

const asscrollRef = useRef();
const containerRef = useRef();

 useEffect(() => {
        const ASScroll = require("@ashthornton/asscroll");
        const asscroll = new ASScroll({
            containerElement:asscrollRef.current
        });
        asscroll.enable()

        asscroll.on('scroll', scrollPos => {
            console.log(scrollPos)
        })
}, []);

please check it

[CorentinTrt]

Hi ! Have the same issue right here :/

i tried to use dynamic from next/dynamic also but same thing

[jsskrh]

I also have the exact same issue, but with reactjs.

So, after a bit of tinkering and searching, I found out the problem exists because of React's Strict mode, which is also on by default in nextjs.

Now you can turn it off, by setting it to false in the next.config.js file:

const nextConfig = {
  reactStrictMode: false, // React Strict Mode is off
}

module.exports = nextConfig

This will fix the immediate problem but it defeats the purpose of strict mode, which is a developer tool that helps detect quick re-render issues. So even with strict mode off, if your application is ever re-rendered quickly, the animation will break. So strict mode mimics this to try to get developers to clean up their useEffects. So you need to return a cleanup function that:

1. Disables asscroll
2. Stops the asscroll animation
3. Destroys the asscroll instance

For this you'll need to also disable asscroll's default requestAnimationFrame and create your own, so you can stop the animation in the cleanup function. You can also destroy the asscroll instance by setting it to an empty object.

[Joel-Mercier]

Thanks @jsskrh that worked well with React/NextJS you need to use a RaF hook instead of the default one from this lib

[MetamorphAlex]

Hey. Having the same issue. It happens even with asscroll.disable() in the cleanup function. @jsskrh, could you explain how to stop the asscroll animation and destroy the asscroll instance?

[Banbeucmas]

@MetamorphAlex A bit late but this was basically what I did on the clean up function

        return () => {
            asscroll.disable();
            asscroll = undefined!;
        }