滚动行为平滑根本不起作用

Question

我想知道为什么我的滚动平滑根本不起作用。我不太确定为什么？我认为添加 overflow-y: scroll; scroll-behavior: smooth; 会有所帮助，但它不起作用。这是我的代码：

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

原文由 James Lee 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我在现代 Chrome 中遇到了同样的问题（例如版本 88.0.4324.182），但我随后使用下面提到的 URL 启用了 smooth scrolling 标志：

 chrome://flags/#smooth-scrolling

原文由 Aniket Sharma 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

• 试试这个…

 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>

原文由 Ashish Sondagar 发布，翻译遵循 CC BY-SA 4.0 许可协议