logo标签列表

在Chrome版本>=81中，scrollintoview无法正常工作。平滑滚动效果也无法实现。

javascriptsmooth-scrolling
14
if (document.querySelector(target)) {
  event.preventDefault();
  document.querySelector(target).scrollIntoView({ behavior: 'smooth' });
}

虽然使用了event.preventDefault来避免默认锚点标签行为，但scrollIntoView上方的平滑滚动行为在Chrome版本>=81中无法工作。在IE和Firefox中可以正常工作。

var dropdownElement = document.getElementById('dropdown');

dropdownElement.addEventListener('change', function(ev) {
  var containerChoosed = document.getElementById('container_' + this.value);
  containerChoosed.scrollIntoView({
    block: "center",
    behaviour: "smooth"
  });
});
div {
  border: 1px solid;
  height: 400px;
  margin: 16px;
}

#container_1 {
  background-color: yellow;
}

#container_2 {
  background-color: blue;
}

#container_3 {
  background-color: green;
}

#container_4 {
  background-color: red;
}
<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<body>

 <select id="dropdown">
   <option value="1">Div 1</option>
   <option value="2">Div 2</option>
   <option value="3">Div 3</option>
   <option value="4">Div 4</option>
 </select>

 <div id="container_1">div 1</div>
 <div id="container_2">div 2</div>
 <div id="container_3">div 3</div>
 <div id="container_4">div 4</div>

</body>
</html>

当下拉菜单中选择任何一个DIV时，您会发现它会滚动到相应的DIV，但是在Chrome浏览器中它的平滑滚动效果不起作用，而且版本是81.0.4044.138（官方构建）。

scrollIntoView在Chrome浏览器中存在很长的bug历史，其中一些至今仍未解决。在某些情况下，几乎每次都可以找到解决方法。您是否想为您的情况添加可运行的演示？ - Kyr
我在上面添加了一段代码片段，描述了我的问题。 - harshith bettaswamy
5个回答
6

我找到了解决这个问题的方法

  1. 打开一个新标签页

  2. 输入 "chrome://flags" 并按回车键

  3. 在搜索栏中搜索 "平滑滚动"

  4. 启用它并重新加载

搞定了

5
这是一个Chrome浏览器的网址，用于访问“平滑滚动”功能的设置页面。 - oCcSking
1
这更像是一个妙招而不是一个解决方案。 - codingexplorer
@codingexplorer 你可以随便称呼它，但这是使其正常工作的方法。作为开发者，你已经完成了你的工作，但如果用户没有启用它，那么它就没有任何用处，对吧？所以，如果你想在你的应用中使用它，这是必需的，它是解决方案的一部分，如果不是整个解决方案的话... - Uzair Saiyed
1
这个方法不能解决其他电脑上的问题，也无法强制在其他电脑上启用此标志。因此，这只是一种局部的临时解决方案，而不是真正解决问题的方法。你不能要求你网站的用户启用这个标志。 - Swayok
5
现在有一种 CSS 属性可以实现相同的效果。
scroll-behavior: smooth;

目前为止（2021年9月1日），尽管浏览器兼容性不如JS解决方案，但它仍然是一个可行的解决方案。

明智的做法是同时使用scroll-behavior和{ behavior: 'smooth' }。效果非常好，而且你甚至不需要知道确切的可滚动容器（在React中无需存储可滚动容器的引用）。 - Swayok
3

只是一个打字错误，属性应该是behavior而不是behaviour。

var dropdownElement = document.getElementById('dropdown');

dropdownElement.addEventListener('change', function(ev) {
  var containerChoosed = document.getElementById('container_' + this.value);
  containerChoosed.scrollIntoView({
    block: "center",
    behavior: "smooth"
  });
});
div {
  border: 1px solid;
  height: 40px;
  margin: 16px;
}

hr {
  height: 40px;
}

select {
  position: fixed;
  top: 0;
  left: 0;
}
  
#container_1 {
  background-color: yellow;
}

#container_2 {
  background-color: blue;
}

#container_3 {
  background-color: green;
}

#container_4 {
  background-color: red;
}
<!DOCTYPE html>
<html>

<head>
  <title></title>
</head>

<body>

  <select id="dropdown">
    <option value="1">Div 1</option>
    <option value="2">Div 2</option>
    <option value="3">Div 3</option>
    <option value="4">Div 4</option>
  </select>

  <div id="container_1">div 1</div>
  <hr />
  <hr />
  <hr />
  <hr />
  <hr />
  <div id="container_2">div 2</div>
  <hr />
  <hr />
  <hr />
  <hr />
  <hr />
  <div id="container_3">div 3</div>
  <hr />
  <hr />
  <hr />
  <hr />
  <hr />
  <div id="container_4">div 4</div>

</body>

</html>

2
尽管更正了“typo behaviour”，添加行为后仍然无法实现平滑滚动，而是直接跳转到 div。运行您的代码片段，同样存在此问题。平滑滚动未发生。 - harshith bettaswamy
这可能是Web开发中最不愉快的方面之一，即出现无法调试和纠正的缺陷。我在Chrome 81.0.4044.122中检查了这个片段，它按预期工作。 - Kyr
我建议在最新的Chrome（Chromium）版本中检查它，也可以在Chrome隐身窗口中检查。一些扩展程序可能会以这种方式影响它。 - Kyr
不幸的是，我在隐身模式下也遇到了同样的问题，我的 Chrome 版本是 81.0.4044.138。而且我不能降级。如果可能，请您安装相同的 Chrome 版本并尝试一下？ - harshith bettaswamy
我也注意到在旧版本的Chrome中，平滑滚动效果是正常工作的。 - harshith bettaswamy
在 版本81.0.4044.138（官方构建）（64位） 中进行检查 - 如预期工作。 - Kyr
1
这似乎是Chrome本身的问题：https://bugs.chromium.org/p/chromium/issues/detail?id=648446 这个例子在Firefox中可以很好地工作，但在Chrome（Windows和Mac，以及Chrome和Ms Edge）中无法工作。
<div class="container">
  <div class="fixedBox">
    <a class="button" href="#app1">anchor1</a>
    <a class="button" href="#app2">anchor2</a>
    <a class="button" href="#app3">anchor3</a>
  </div>
  <div id='app1'>text1</div>
  <div class="box"></div>
  <div id='app2'>text2</div>
  <div class="box"></div>
  <div id='app3'>text3</div>
</div>
.fixedBox {
  position: fixed;
  bottom: 100px;
  right: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.button {
  display: flex;
  margin: 10px;
  height: 30px;
  width: 80px;
  border-radius: 5px;
  background-color: rgb(6, 205, 255);
  justify-content: center;
  align-items: center;
  cursor: pointer;
  user-select: none;
}
.box {
  width: 100px;
  height: 2600px;
  background: linear-gradient(rgb(252, 158, 247), rgb(2, 217, 255));
}
div {
  user-select: none;
}
html {
  scroll-behavior: smooth;
}
a {
  text-decoration: none;
}
-1
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接