标签：nearest 滚动 scrollIntoView button element scrollIntoViewOptions API 好用
前情
在前端开发需求中，经常需要用到锚点功能，以往都是获取元素在滚动容器中的位置再设置scrollTop来实现的。
scrollIntoView介绍
scrollIntoView()方法将调用它的元素滚动到浏览器窗口的可见区域
调用方式：
var element = document.getElementById("test");
element.scrollIntoView（）; // 等同于element.scrollIntoView(true)
element.scrollIntoView（alignToTop）; //布尔参数
element.scrollIntoView（scrollIntoViewOptions）; //对象参数
alignToTop参数说明：
| alignToTop | [可选]，目前之前这个参数得到了良好的支持 |
|---|---|
| true(默认值) | 元素的顶部将对齐到可滚动祖先的可见区域的顶部。对应于scrollIntoViewOptions: {block: "start", inline: "nearest"}。 |
| false | 元素的底部将与可滚动祖先的可见区域的底部对齐。对应于scrollIntoViewOptions: {block: "end", inline: "nearest"}。 |
scrollIntoViewOptions参数说明：
| scrollIntoViewOptions | [可选]，目前这个参数浏览器对它的支持并不好 |
|---|---|
| behavior | [可选]定义过渡动画。"auto","instant"或"smooth"。默认为"auto" |
| block | [可选] "start"，"center"，"end"或"nearest"。默认为"center" |
| inline | [可选] "start"，"center"，"end"或"nearest"。默认为"nearest" |
元素可能无法完全滚动到顶端或底端，例如滚动区域不够滚的时候则无法滚动到顶端
使用示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
*{
padding: 0;
margin: 0;
}
.container{
width: 100%;
height: 300px;
overflow-x: hidden;
overflow-y:auto;
}
.item{
width：100%;
height: 100px;
line-height: 100px;
margin-bottom: 10px;
text-align: center;
color: #fff;
background-color: green;
}
.button{
padding: 15px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">第1条</div>
<div class="item">第2条</div>
<div class="item">第3条</div>
<div class="item">第4条</div>
<div class="item">第5条</div>
<div class="item">第6条</div>
<div class="item">第7条</div>
</div>
<button class="button">跳转到第1条</button>
<button class="button">跳转到第5条</button>
<script>
var items = document.querySelectorAll('.item');
var button = document.querySelectorAll('.button');
button[0].addEventListener('click', function(){
items[0].scrollIntoView();
}, false);
button[1].addEventListener('click', function(){
items[4].scrollIntoView();
}, false);
</script>
</body>
</html>
演示地址：https://jsbin.com/sadukatunu/edit?html,css,js,output
标签：nearest,滚动,scrollIntoView,button,element,scrollIntoViewOptions,API,好用 来源： https://www.cnblogs.com/xwwin/p/15956704.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。