scrollIntoView()的方法属性及使用其实现锚点定位

最新推荐文章于 2024-03-05 11:35:24 发布

小锅盖快跑

最新推荐文章于 2024-03-05 11:35:24 发布

阅读量3.8k

点赞数 1

分类专栏：问题总结文章标签： js

本文链接：https://blog.csdn.net/weixin_46995731/article/details/110133693

版权

问题总结专栏收录该内容

16 篇文章 0 订阅

订阅专栏

scrollIntoView()方法属性

在一个移动项目中遇到个这样的需求,一个表单填写页面,每项都有表单验证,并且点击提交按钮,未通过校验的输入框下边显示校验信息,同时页面滑动定位到第一个未通过校验的输入框.
我们在完成这项需求时,使用的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>

效果图
在这里插入图片描述

小锅盖快跑

关注

1
点赞
踩
14

收藏

觉得还不错? 一键收藏
1
评论
scrollIntoView()的方法属性及使用其实现锚点定位

详细介绍scrollIntoView（）方法属性在一个移动项目中遇到个这样的需求,一个表单填写页面,每项都有表单验证,并且点击提交按钮,未通过校验的输入框下边显示校验信息,同时页面滑动定位到第一个未通过校验的输入框.我们在完成这项需求时,使用的scrollIntoView（）方法.下边我们详细介绍一下scrollIntoView的属性用法.简介该scrollIntoView()方法将调用它的元素滚动到浏览器窗口的可见区域。语法element.scrollIntoView（）; // 等同于el
复制链接

扫一扫