关于前端:任意dom元素实现滚动

利用场景:

有时候增加元素后,将新增的元素放到了最底部,须要滚动该元素包裹层的底部

html:

<div class="tobottom">去底部</div>
    <div class="wrap">
        <div class="inner-wrap"></div>
        <div>我是底部你看到我了</div>
    </div>

css:

.wrap {
            width: 100%;
            height: 500px;
            background: #ddd;
            overflow: auto;
        }
        
        .inner-wrap {
            width: 100%;
            height: 1500px;
            background: #333;
        }

js:

// $('.wrap').scroll(function() {  
            //     var scrollTop = $(this).scrollTop(); 
            //     console.log("我滚了", scrollTop)  
            //     var scrollHeight = $('.inner-wrap').height();//元素自身高度  
            //     var windowHeight = $(this).height();//里面包裹层高度
            //     /**
            //      * 
            //      * **/
            //     console.log("scrollHeight", scrollHeight) 
            //     console.log("windowHeight", windowHeight)
            // });
            // 点击去底部
            $(".tobottom").click(function() {
                var scrollHeight = $('.inner-wrap').height();
                var windowHeight = $(this).height();
                var buttomheight = scrollHeight
                $('.wrap').animate({
                    scrollTop: scrollHeight
                }, 500);
            })

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理