scrollintoview 在 chrome 版本>=81 中不起作用。行为平稳没有发生答案

【问题标题】：scrollintoview is not working in chrome version>=81. Behaviour smooth is not happeningscrollintoview 在 chrome 版本>=81 中不起作用。行为平稳没有发生
【发布时间】：2020-05-19 07:24:35
【问题描述】：

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

即使event.preventDefault 用于避免默认锚标记行为，scrollIntoView 以上的行为平滑也不起作用。功能在 IE 和 firefox 中有效，但在 chrome 版本中无效>=81

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 中不起作用，并且 chrome 的版本是版本 81.0.4044.138（官方构建）

【问题讨论】：

scrollINtoView 在 Chrome 中有很长的错误历史，其中一些现在是 still open。在某些情况下，几乎每次都可以找到解决方法。您想为您的案例添加可运行的演示吗？
在上面添加了一个代码 sn-p 来描述我的问题

标签： javascript smooth-scrolling

【解决方案1】：

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

打开一个新标签
输入“chrome://flags”并回车
在搜索栏中搜索“平滑滚动”
启用并重新加载

完成了

【讨论】：

chrome://flags/#smooth-scrolling =)

【解决方案2】：

只是一个错字，属性必须是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>

【讨论】：

即使在添加行为而不是错字行为之后，平滑滚动也不会发生，而是直接跳转到 div。运行您的代码 sn-p 并且仍然存在相同的问题。平滑滚动没有发生
这可能是 Web 开发中最令人不快的方面之一，即出现无法调试和纠正的缺陷。我在 Chrome 81.0.4044.122 中检查了这个 sn-p，它按预期工作。
我可能会建议检查：最新的 Chrome (Chromium) 版本，也在 Chrome 隐身窗口中，某些扩展可能会以这种方式影响/
不幸的是，我在隐身模式下面临同样的问题，我的 chrome 版本是 81.0.4044.138 。我不应该降级。如果可能的话，您能否安装相同的 chrome 版本并试一试？
我还注意到在旧版本的 chrome 中，平滑滚动工作正常

【解决方案3】：

现在有一个 css 属性可以实现同样的效果

scroll-behavior: smooth;

虽然在撰写本文时browser compatibility 还不如 js 解决方案。

【讨论】：

【解决方案4】：

这看起来像是 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;
}

【讨论】：