Vue如何使内部div滑动到底部

希望实现的效果是：
外层一个大的框架。
内部有一个div。
这个div是一个scrollView可以上下滚动。
有个按钮点击之后在div里增加一个模块。
但是此时滚动条不会动。
希望点击按钮之后增加模块后直接在这个div里滑动到底部展示新增的模块。

是内部可滚动的div到底部不是整个页面。
请问该如何实现？

vue.js javascript css html

阅读 8.5k

3 个回答

✓ 已被采纳

获取当前滚动的元素 element，然后将其 element.scrollTop = element.scrollHeight。

wlove

6.9k3835

发布于
2018-11-06

<!doctype html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />            
        <title></title>
        <style>
            #box{
                width: 600px;
                height: 600px;
                overflow: scroll;
            }
            .p1,.p2,.p3,.p4{
                height: 300px;
                background: #ccc;
            }
        </style>
        
        
    </head>
 <body>
    <div>
        
    
        <div id="box">
                <p class="p1">11111</p>
                <p class="p2">22222</p>
                <p class="p3">33333</p>
                 <p class="p4">44444</p>
        </div>
        <button class="btn">添加并滑动</button>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
         <script type="text/javascript">
            $(".p2,.p3,.p4").hide();   
            var i = 2; 
            $(".btn").click(function(){
                $(".p" + i).show()
                $("#box").scrollTop(300 + (i-2) * 300);
                i++;
                
            })

        </script>
 </body>
 
</html>