0


js 滚动条自动滚动到最底部

简介:

    功能简介,js 滚动条自动滚动到最底部

效果展示:

核心代码:

window.scrollTo(0, document.body.scrollHeight);

代码示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
    </head>
    <body>
        <div class="panel-body" style="flex-grow: 1; overflow-y: auto; background-color: #343541; color: white;">
        </div>
        <div style="position: sticky; bottom: 0;">
            ceshi
        </div>
        <script>
            setInterval(function() {
                $(".panel-body").append("123456<br>" + new Date());
                scrollBoxFun();
            }, 100)

            function scrollBoxFun() {
                window.scrollTo(0, document.body.scrollHeight);
            }
        </script>
    </body>
</html>

代码示例2:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
    </head>
    <body>
        <div class="card" style="height: 100vh;">
            <div class="panel-body" style="flex-grow: 1; overflow-y: auto; background-color: #343541; color: white;">
            </div>
            <div style="position: sticky; bottom: 0;">
                ceshi
            </div>
        </div>
        <script>
            setInterval(function() {
                $(".panel-body").append("123456<br>" + new Date());
                scrollBoxFun();
            }, 100)

            function scrollBoxFun() {
                window.scrollTo(0, document.body.scrollHeight);
            }
        </script>
    </body>
</html>

本文转载自: https://blog.csdn.net/qq_36521848/article/details/130327325
版权归原作者 王家五哥 所有, 如有侵权,请联系我们删除。

“js 滚动条自动滚动到最底部”的评论:

还没有评论