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:

1. /

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

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:

1. https://nana-asia./
2. https://pelizzari./en
3. https://loerarchitecten./en/projects/republica-short-guy

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

• javascript
• reactjs
• vue.js
• scroll

Share Improve this question Follow asked Apr 20, 2020 at 9:29 Maisha MalihaMaisha Maliha 6711 gold badge11 silver badge88 bronze badges 2

• 1 See this question here: stackoverflow./questions/47011055/… – Enchew Commented Apr 20, 2020 at 9:36
• I was literaly looking for it for so long – Kabeer Jaffri Commented May 5, 2021 at 21:11

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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

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/