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

scrollIntoView即使event.preventDefault用于避免默认锚标记行为，上述行为也无法正常工作。功能在 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 版（官方构建）

4

4 回答 4

3

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

  1. 打开一个新标签

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

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

  4. 启用它并重新加载

并做了

于 2021-05-06T17:03:13.853 回答
2

现在有一个css属性来实现相同的

scroll-behavior: smooth;

虽然在撰写本文时浏览器兼容性不如 js 解决方案。

于 2021-06-01T18:54:23.333 回答
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>

于 2020-05-19T18:04:23.000 回答
0

这看起来像是 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;
}
于 2022-01-18T12:45:16.970 回答