scrollIntoView()

最新推荐文章于 2025-01-11 13:20:17 发布

原创最新推荐文章于 2025-01-11 13:20:17 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#滚动条

h5 专栏收录该内容

8 篇文章

订阅专栏

博客介绍了聊天对话框中滚动条定位的方法。用原始计算offset的方法定位到特殊位置很麻烦，而使用新的API elemen.scrollIntoView()可解决该问题，加上参数false，如abc.scrollIntoView(false)，能让目标元素在滚动条底端。

聊天对话框中，常见的滚动条需要定位到某个特殊到位置，用原始到计算offset 的方法也可以，但是很麻烦；
现在学会了一个新的api elemen.scrollIntoView();

<!DOCTYPE html>
<html>
<head>
    <style>
    #box{
        width: 100px;
        height: 100px;
        border: 1px solid #ff0;
        overflow: auto;
    }
    .ddd{
        height: 20px;
        border: 1px solid #000;
        margin: 4px;

    }
    </style>
    <script>
    function sss() {
        var abc = document.getElementById('ddd1');
        abc.scrollIntoView();
    }
    </script>
</head>
<body>
    <div id="box">
        <div class="ddd">1</div>
        <div class="ddd">2</div>
        <div class="ddd">3</div>
        <div class="ddd">4</div>
        <div class="ddd" id='ddd1'>5</div>
        <div class="ddd">1</div>
        <div class="ddd">2</div>
        <div class="ddd">3</div>
        <div class="ddd">4</div>
    </div>
    <button onclick='sss()'>点击</button>
</body>

</html>

如果加上参数 false，即 abc.scrollIntoView(false); 就是目标元素在滚动条底端。