HTML5用scrollIntoView()方法来规范滚动页面

最新推荐文章于 2024-08-22 13:28:55 发布

甩头淡忘烦恼

最新推荐文章于 2024-08-22 13:28:55 发布

阅读量4.4k

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/qq_36571602/article/details/81460396

版权

HTML5用scrollIntoView()方法来规范滚动页面

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    #roll_top {
        position: relative;
        height: 1200px;
        font-size: 50px;
        color: #FFF;
        background-color: #42a3ad;
    }

    #bottom {
        position: absolute;
        display: block;
        left: 0;
        bottom: 0;
    }
    </style>
</head>

<body>
    <h2>scrollIntoView</h2>
    <div>
        <button id="roll1">scrollIntoView(false)</button>
        <button id="roll2">scrollIntoView(true)</button>
        <div>
            <div id="roll_top">
                scrollIntoView(ture)元素上边框与视窗顶部齐平
                <span id="bottom">scrollIntoView(false)元素下边框与视窗底部齐平</span>
            </div>
        </div>
    </div>
</body>

</html>
<script type="text/javascript">
window.onload = function() {
    document.querySelector("#roll1").onclick = function() {
        document.querySelector("#roll_top").scrollIntoView(false); //底部齐平
    };
    document.querySelector("#roll2").onclick = function() {
        document.querySelector("#roll_top").scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
    };

// scrollIntoView({block: "end"}) === scrollIntoView(false)
// scrollIntoView({behavior: "instant", block: "end", inline: "nearest"});
/*
    behavior 可选
    定义缓动动画， "auto", "instant", 或 "smooth" 之一。默认为 "auto"。
    block 可选
    "start", "center", "end", 或 "nearest"之一。默认为 "center"。
    inline 可选
    "start", "center", "end", 或 "nearest"之一。默认为 "nearest"。
*/
}
</script>