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

标签 javascript smooth-scrolling

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

以上scrollIntoView即使event.preventDefault，行为平滑也不起作用用于避免默认 anchor 标记行为。功能在 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 版(官方构建)

最佳答案

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

打开一个新标签

输入“chrome://flags”并回车

在搜索栏中搜索“平滑滚动”

启用它并重新加载

并做了

关于javascript - scrollintoview 在 chrome 版本>=81 中不起作用。行为平稳没有发生，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61885401/