'scroll behaviour smooth not working at all

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>
htmlcss


Solution 1:[1]

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

Solution 2:[2]

  • Try this one...

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>

Solution 3:[3]

First ensure if your browser is compatible with the scroll-behavior or not.

To check browser compatibility you can follow this link. Just click here

If your browser is compatible with this property but still smooth scroll is not working
then this is not fault or error in code but you have to change a small setting of your browser.

If you are on chrome browser then Click here or you can go to URL "chrome://flags/" depending upon your browser and press ctrl+f to open find dialogue-box and search for smooth scrolling and simply enable it and re-launch browser to make changes.

Solution 4:[4]

If adding scroll-behavior:smooth to html is not working, what worked for me is adding it to the body as well.

    html, body { 
      scroll-behavior: smooth
    }

Solution 5:[5]

you have to override the current auto scroll settings by putting !important into your css code.

*, html {

    scroll-behavior: smooth !important;
}
```

Solution 6:[6]

Unfortunatelly this will also stop working if your device "prefers-reduced-motion"...

I always thought overwriting stuff that's not "auto" by nature, is bad practice, but this seems to be a thing now.

Solution 7:[7]

in case anyone has problems with this with Vue:

Adding


<style>
html {
  scroll-behavior: smooth;
}
</style>

to App.vue worked for me!

Solution 8:[8]

I solved my problem with chrome by using this:

html:focus-within {
  scroll-behavior: smooth;
}

More on the subject is posted on Css-tricks "Fixing Smooth Scrolling with Find-on-Page"

Solution 9:[9]

Paste the below link in your browser which you are going to use as the live server: chrome://flags/#smooth-scrolling

Then, a new tab will open up and then you can enable the smooth scrolling option and relaunch the tab. For putting the smooth scrolling action into your website, you have to put the below code in your code editor: <html lang="en" style="scroll-behavior: smooth;" >

Solution 10:[10]

While reading some of the answers got an idea to check if windows performance settings could be somehow related, and after switching to "adjust for best appearance" in System Properties > Performance Options scrolling became smooth.

Related Questions