How to make an element smooth scrollable

Question

I have a container element with a height of 500px. The content inside the <div> overflows so that I can make it scrollable. I have overflow hidden applied to the container element so that I can transition the value of the y-axis to make it look like smooth scrolling. But I can't seem to figure out how to hijack the window scroll event for that particular container element and translate the Y-axis.

<div class="container" style="height: 500px; overflow: hidden;">
     <div class="content" style="min-height: 1000px;"></div>
</div>

I am looking for a way to make the custom scrolling ease. Kind of like what a popular scroll library like a locomotive does. Here is an example website https://www.white-elephant.fr/. This website use locomotive for their smooth scrolling effect.

I am already able to create a custom scrollbar and bind it to the translateY value of the container, but the difficulty I am having is I don't have any idea on how to bind mousewheel event to the container.

Does this answer your question? [How to scroll to an element inside a div?](https://stackoverflow.com/questions/635706/how-to-scroll-to-an-element-inside-a-div) — Diego Fortes, Mar 05 '21 at 06:32

score 1 · Answer 1 · answered Mar 05 '21 at 08:52

1

You can use the property in your css or add style :

scroll-behaviour: smooth

but this doesn't work in internet explorer. Majority of browser it will work .

answered Mar 05 '21 at 08:52

Sumeet kishore

19
4

score 0 · Answer 2 · edited Mar 05 '21 at 10:24

0

Add scroll-behavior property to the container class:

.container {
   scroll-behavior: smooth;
}

edited Mar 05 '21 at 10:24

msoler

2,930
2
18
30

answered Mar 05 '21 at 06:50

Vishal Chandra

1
1
2

1

To which element? – Daweed Mar 05 '21 at 07:04
to the container class – Vishal Chandra Mar 05 '21 at 07:45

Bastian Fießinger · Answer 3 · 2021-03-13T13:11:23.487

I created a smooth scroll libary thats pretty easy to use without any dependencies.
ScrollToSmooth can apply smooth scrolling animations to any element or position on your page with 31 predefined easing animations.

It's tree shakable which means you do not need to bundle it with all animations at once.

Just npm install scrolltosmooth and

import { 
  scrollToSmooth, 
  easeOutCubic 
} from 'scrolltosmooth';

let smoothScroll = new scrollToSmooth('a', {
  easing: easeOutCubic
});
smoothScroll.init();

score 0 · Answer 4 · answered Oct 31 '21 at 08:33

0

Don't hide the overflow, just hide the scrollbar...

    div.content {
        overflow: scroll;
        scroll-behavior: smooth;
    }
    div.content::-webkit-scrollbar {
        width: 0;
    }

answered Oct 31 '21 at 08:33

Plantt

230
1
10

How to make an element smooth scrollable

4 Answers4