har*_*amy 5 javascript smooth-scrolling
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（官方版本）
我找到了解决这个问题的方法
打开一个新选项卡
输入“chrome://flags”并按 Enter 键
在搜索栏中搜索“平滑滚动”
启用它并重新加载
并做了
现在有一个 css 属性可以实现相同的效果
scroll-behavior: smooth;
尽管在撰写本文时浏览器兼容性不如 js 解决方案。
只是一个拼写错误，属性必须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>| 归档时间： |
|
| 查看次数： |
2232 次 |
| 最近记录： |