How to do slow scrolling like these website are doing

Question

There are several websites where I see smooth slow scrolling. I have been looking for plugins for react or vue. I basically want to learn how to do it with vanilla Javascript. Also you can suggest plugins libraries and whatever you want. But I want to know how to do it in pure vanilla js. I want to learn to control scroll speed.

here are the websites:

you can tell me what these websites are using also tell me how to do it using pure js.

See this question here: https://stackoverflow.com/questions/47011055/smooth-vertical-scrolling-on-mouse-wheel-in-vanilla-javascript — Enchew, Apr 20 '20 at 09:36

score 2 · Answer 1 · answered Apr 20 '20 at 09:40

Please have a look at following demo, might be helpful.

https://css-tricks.com/snippets/jquery/smooth-scrolling/

There is also an opensource library with name 'Smooth-Scroll', pasting link below. They can be used as a starting point.

https://github.com/cferdinandi/smooth-scroll

Hope it helps.

score 2 · Answer 2 · answered Apr 20 '20 at 09:40

One approach:

Catch the mousewheel and touch events and prevent their orignal behaviour.
Detect direction and speed of touch events or scroll amount for mousewheel events
Use the event values and map those to the desired scroll level
Apply a CSS translate to your page content

score -1 · Answer 3 · answered May 16 '20 at 20:42

If you want the page to scroll smoothly like the first like here is a good plugin https://jokertattoo.co.uk/js/SmoothScroll.js You can mess around with these values till you get a result you want:

 frameRate        : 150, // [Hz]
    animationTime    : 2000, // [px]
    stepSize         : 150, // [px]

and here is a demo of it in action: https://ui-unicorn.co.uk/my-cv/

How to do slow scrolling like these website are doing

3 Answers3