在一个移动项目中遇到个这样的需求,一个表单填写页面,每项都有表单验证,并且点击提交按钮,未通过校验的输入框下边显示校验信息,同时页面滑动定位到第一个未通过校验的输入框.
我们在完成这项需求时,使用的scrollIntoView（）方法.
下边我们详细介绍一下scrollIntoView的属性用法.
该scrollIntoView()方法将调用它的元素滚动到浏览器窗口的可见区域。
element.scrollIntoView（）; // 等同于element.scrollIntoView(true)
element.scrollIntoView（alignToTop）; //布尔参数
element.scrollIntoView（scrollIntoViewOptions）; //对象参数
| alignToTop | [可选]，目前之前这个参数得到了良好的支持 |
|---|---|
| true | 元素的顶部将对齐到可滚动祖先的可见区域的顶部。对应于scrollIntoViewOptions: {block: “start”, inline: “nearest”}。这是默认值 |
| false | 元素的底部将与可滚动祖先的可见区域的底部对齐。对应于scrollIntoViewOptions: {block: “end”, inline: “nearest”}。 |
| scrollIntoViewOptions | [可选]，目前这个参数浏览器对它的支持并不好，可以查看下文兼容性详情 |
|---|---|
| behavior | [可选]定义动画过渡效果， "auto"或 “smooth” 之一。默认为 “auto”。 |
| block | [可选] 定义垂直方向的对齐， “start”, “center”, “end”, 或 "nearest"之一。默认为 “start”。 |
| inline | [可选]定义水平方向的对齐， “start”, “center”, “end”, 或 "nearest"之一。默认为 “nearest”。 |
var element = document.getElementById("box");
element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({block: "end"});
element.scrollIntoView({behavior: "instant", block: "end", inline: "nearest"});
注意：
取决于其它元素的布局情况，此元素可能不会完全滚动到顶端或底端。
实例应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.top {
position: fixed;
right: 30px;
bottom: 30px;
}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate saepe enim nulla nobis provident quaerat tempore. Adipisci voluptatem velit optio voluptatum, id laborum perferendis cumque! Iste sint sit blanditiis eaque?
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde eligendi vitae dolorum placeat harum soluta nihil minus reiciendis nulla, fuga explicabo optio. Dolorum ut magnam laborum exercitationem? Non, distinctio accusamus.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate saepe enim nulla nobis provident quaerat tempore. Adipisci voluptatem velit optio voluptatum, id laborum perferendis cumque! Iste sint sit blanditiis eaque?
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde eligendi vitae dolorum placeat harum soluta nihil minus reiciendis nulla, fuga explicabo optio. Dolorum ut magnam laborum exercitationem? Non, distinctio accusamus.
</div>
<div class="bottom" style="height: 20px;border:1px solid #f00;"></div>
<button class="top">点击</button>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate saepe enim nulla nobis provident quaerat tempore. Adipisci voluptatem velit optio voluptatum, id laborum perferendis cumque! Iste sint sit blanditiis eaque?
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde eligendi vitae dolorum placeat harum soluta nihil minus reiciendis nulla, fuga explicabo optio. Dolorum ut magnam laborum exercitationem? Non, distinctio accusamus.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate saepe enim nulla nobis provident quaerat tempore. Adipisci voluptatem velit optio voluptatum, id laborum perferendis cumque! Iste sint sit blanditiis eaque?
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde eligendi vitae dolorum placeat harum soluta nihil minus reiciendis nulla, fuga explicabo optio. Dolorum ut magnam laborum exercitationem? Non, distinctio accusamus.
</div>
<script>
var btn = document.querySelector('.top');
btn.addEventListener('click', function() {
var element = document.querySelector('.bottom')
element.scrollIntoView({behavior: "smooth", block: "start",});
})
</script>
</body>
</html>
</body>
</html>
效果图
