Menu
I am wondering why my scroll smooth isn't working at all. I am not too sure why? I thought adding overflow-y: scroll; scroll-behavior: smooth; will help but its not working. Here is my code:
#container{
overflow-y: scroll;
scroll-behavior: smooth;
}
.topTab{
bottom: 0;
position: fixed;
font-size: 25px;
color: white;
}
.pg{
font-size: 100px;
height: 100vh;
background-color: blue;
text-align: center;
}
a{
color: white;
}<div class = "topTab">
<li><a href="#1">1</a></li>
<li><a href="#2">2</a></li>
<li><a href="#3">3</a></li>
</div>
<div id = "container">
<div id = "1" class= "pg">1</div>
<div id = "2" class = "pg">2</div>
<div id = "3" class = "pg">3</div>
</div>
569
The scroll-behavior property is specified as one of the keyword values listed below. The scrolling box scrolls instantly. The scrolling box scrolls in a smooth fashion using a user-agent-defined timing function over a user-agent-defined period of time.
Based on documentation, scroll-behavior: smooth not working on body element ( try it ): The scroll-behavior property of the HTML body element is not propagated to the viewport. But it works on other selectors like html ( try here ). Also you can try pure JavaScript solution ( example ): Show activity on this post. Show activity on this post.
The scrolling box scrolls in a smooth fashion using a user-agent-defined timing function over a user-agent-defined period of time. User agents should follow platform conventions, if any.
The scroll-behavior CSS property sets the behavior for a scrolling box when scrolling is triggered by the navigation or CSSOM scrolling APIs. Note that any other scrolls, such as those performed by the user, are not affected by this property. When this property is specified on the root element, it applies to the viewport instead.
I was facing the same issue in modern Chrome (e.g. in version 88.0.4324.182) but I then enable the smooth scrolling flag using the below-mentioned URL :
chrome://flags/#smooth-scrolling
html {
scroll-behavior: smooth;
}
#container{
overflow-y: scroll;
}
.topTab{
bottom: 0;
position: fixed;
font-size: 25px;
color: white;
}
.pg{
font-size: 100px;
height: 100vh;
background-color: blue;
text-align: center;
}
a{
color: white;
}<div class = "topTab">
<li><a href="#1">1</a></li>
<li><a href="#2">2</a></li>
<li><a href="#3">3</a></li>
</div>
<div id = "container">
<div id = "1" class= "pg">1</div>
<div id = "2" class = "pg">2</div>
<div id = "3" class = "pg">3</div>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
