原生前端如何让滚动条在元素更新的同时滚动到底部

全能全知者

已于 2024-05-20 03:58:16 修改

阅读量382

点赞数 4

文章标签： html 前端 javascript css

于 2024-05-20 02:41:24 首次发布

本文链接：https://blog.csdn.net/qq_74177889/article/details/139051828

版权

原生前端如何让滚动条在元素更新的同时滚动到底部

通过了两个半小时的研究，才琢磨出了在原生自动滚动到滚动条底部的好办法，绕了很多弯路。

设置滚动条

注意,要理解滚动条的概念，页面滚动条和组件滚动条是不一样的：

1.当元素不断增多的时候，页面视图放不下这么多元素的时候就会自动加载滚动条使用户自行滚动。

2.而组件滚动条是当子元素的高度或者宽度超过了父元素滚动条的高度的时候，滚动条元素就会在界面视图内产生滚动条让用户滑动，而不会对其他组件产生影响。

所以scrollTop只对有滚动条的元素有效，特性：

子元素和父元素都设置了高度，且子大于父
父元素样式不能设置 overflow:hidden 而应该设置overflow:scroll属性

所以，滚动条组件一定要设置一个具体的高度才能实现在动态更新的时候，修改滚动条到顶部的距离来实现，动态更新的时候，滚动条自动滚到底部，但具体的高度数值会在不同的设备中会产生不好的显示效果，那如何去解决这个问题呢？

所以，在这里，我们设置的具体高度的单位使用vh ，是指css中相对长度单位，表示相对视口高度（Viewport Height），1vh = 1% * 视口高度。

通俗点讲，vh就是当前屏幕可见高度的1%，也就是说 height:100vh == height:100%;

这样一来，滚动条就有了具体的高度了。

 <div style="height:90vh; overflow: auto;"  ref="scrollContainer" id="home">
     <!-- 动态大小的组件 -->
</div  >

滚动条自动滚动办法

我们直接用js 通过id获取DOM的方式去获取滚动条的高度scrollHeight和scrollTop(对顶部的相对距离)。

通过不断动态修改对于顶部的相对距离来达到将滚动条底部的目的

//记录上一次滚动时的滚动条高度
let lastscrollHeight = 0;
//滚动到页尾
const scrollToBottom = () => {
    const container = document.getElementById('home');
    //当高度改变的时候才执行滚动
    if (container.scrollHeight !== lastscrollHeight){
        //滚动
      //container.scrollTop = container.scrollHeight;
    }
    lastscrollHeight = container.scrollHeight;
};