比锚点更平滑好用的scrollIntoView

我们在开发网页的时候,难免会需要让滚动条滚动到一个指定的位置,传统的使用方法,我们都是使用a锚点来配合js来做平滑滚动

Element.scrollIntoView()介绍文档

Element 接口的scrollIntoView()方法会滚动元素的父容器,使被调用scrollIntoView()的元素对用户可见。

语法

element.scrollIntoView(); // 等同于element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // Boolean型参数
element.scrollIntoView(scrollIntoViewOptions); // Object型参数

简单点说,就是你只需要获取到这个元,然后使用scrollIntoView,浏览器就会自动跳转到当前元素的位置。

你可以还可以使用参数来控制,滚动后垂直方向的位置和水平方向的位置。自己写个demo感受一下吧。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="button1">下一页</button>
    <button class="button2">跳转到内部块,内容滚动在浏览器中间</button>
    <button class="button3">跳转到内部块,内容滚动到浏览器靠底</button>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="div4">
        <div class="demo1"></div>
    </div>
    <div class="div5">
        <div class="demo2"></div>
    </div>
    <style>
        button {
            position: sticky;
            top: 0;
        }

        * {
            margin: 0;
            padding: 0;
        }

        div {
            height: 100vh;
            background-color: #f1f1f1;
        }

        .div1 {
            background-color: aqua;
        }

        .div2 {
            background-color: aquamarine;
        }

        .div3 {
            background-color: beige;
        }

        .div4 {
            background-color: bisque;
        }

        .div5 {
            background-color: blueviolet;
        }
        .demo1{
            height: 300px;
            width: 300px;
            background-color: brown;
        }
        .demo2{
            height: 300px;
            width: 300px;
            background-color: brown;
        }
    </style>
    <script>
        let button1 = document.querySelector('.button1');
        let button2 = document.querySelector('.button2');
        let button3 = document.querySelector('.button3');
        let div = document.querySelectorAll('div');
        let demo1 = document.querySelector('.demo1');
        let demo2 = document.querySelector('.demo2');
        let num = 0;
        button1.addEventListener('click', function () {
            if(num >= div.length){
                num = 0
            }
            div[num].scrollIntoView({ 
                behavior: "smooth", 
                block: "end", 
                inline: "nearest" 
            });
            ++num;
        });

        button2.addEventListener('click', function () {
            demo1.scrollIntoView({ 
                behavior: "smooth", 
                block: "center"
            });
        })
        button3.addEventListener('click', function () {
            demo2.scrollIntoView({ 
                behavior: "smooth", 
                block: "end"
            });
        })
    </script>
</body>

</html>

注意

1、取决于其它元素的布局情况,此元素可能不会完全滚动到顶端或底端。

2、暂时无法定义滚动时间和速度

  • 1.本站主要是为了记录工作、学习中遇到的问题,可能由于本人技术有限,有些不正确的地方,仅供参考。
  • 2.本站中会转载我认为有用的博客文章,添加一些外链网站地址,但这些博客文章、论坛和网站上的内容和我没有关系,不代表我的意见,请网友自己多注意辨别。
  • 3.本站中转载文章会写明来源(点击下方链接按钮即可),感谢原作者的辛苦写作,如果有异议,及时联系我处理,谢谢!
  • 4.欢迎指出有问题的地方,我会尽快修正,谢谢!

系统由 Nginx + Next.js + React + Node + TailWindCss 驱动

沪ICP备20021316号