'CSS Scroll Snap effect without using the Scroll Snap API

I've been diving some time on css scroll-snap and it works fine but I wanted the scroll-snap to have custom scroll speed in which until now I haven't found any workarounds.

For context, I wanted the scrolling similar to arknights website

Here is what I've tried so far

export default function Home() {

  return (
    <div className="h-screen w-screen max-h-screen max-w-screen overflow-y-auto snap-mandatory snap-y scroll-smooth">
      <div className="h-screen w-screen snap-start">
        1st Section
      </div>

      <div className="h-screen w-screen snap-start">
        2nd Section
      </div>

      <div className="h-screen w-screen snap-start">
        3rd SECTION
      </div>
    </div>
  );
}

Is there something I can do to make scroll-snap work like the website above? Or if not possible, any simple implementations/pseudocode for this?

cssreactjsjsxtailwind-cssscroll-snap


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions