前端如何让滚动条a-scrollbar在元素更新的同时滚动到底部

如何让滚动条a-scrollbar在元素更新的同时滚动到底部

通过了两小时的研究，才琢磨出了在vue中自动滚动到滚动条底部的好办法。

a-scrollbar是在arco.design中的一个组件，可以给组件内的元素限定范围的滚动条。

设置滚动条

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

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

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

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

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

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

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

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

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

 <a-scrollbar type ="embed" style="height:90vh; overflow: auto;"  ref="scrollContainer" id="home">
     <!-- 动态大小的组件 -->
  <div v-for="(item, index) in chatArr" :key="index">
  </div>
</a-scrollbar  >

滚动条自动滚动办法

我本人使用的vue setup的写法，同时arco.design中的滚动条有提供者三个方法，scrollTop(top)是设置将滚动条滚到距离顶端top的位置。所以此时我们需要获取到滚动条此时的高度才能动态滚动到元素的底部，但arco.design没有提供获取滚动条高度的方法。

那如何去获取呢？

我们直接用js 通过id获取DOM的方式去获取滚动条的高度scrollHeight。

**笔记:**原来ref获取的Dom和用js获取的DOM是不一样的，ref直接获取封装好的组件的DOM，而js尝试获取封装组件的DOM的时候，直接是拿到了原生的DOM。

下面是在

const scrollContainer = ref(null);
//记录上一次滚动时的滚动条高度
let lastscrollHeight = 0;
//滚动到页尾
const scrollToBottom = () => {
  if (scrollContainer.value) {
    const container = document.getElementById('home');
    //当高度改变的时候才执行滚动
    if (container.scrollHeight !== lastscrollHeight){
        //滚动
      scrollContainer.value.scrollTop(container.scrollHeight);
        //如果是原生去写的话可以使用这一条
      //container.scrollTop = container.scrollHeight;
    }
    lastscrollHeight = container.scrollHeight;
  }
};

然后就实现该功能啦，当然如果没有使用封装组件的scrollTop的，也可以尝试使用原生的：

container.scrollTop = container.scrollHeight;

直接将滚动条滚动到底部

参考资料:

在 JavaScript 中滚动到 Div 的底部 | D栈 - Delft Stack

解决给元素设置scrollTop但不生效问题_设置scrolltop 无效-CSDN博客

（react）设置scrollTop无效的原因及解决方法_scrolltop不生效-CSDN博客

CSS calc()函数与单位vh 通俗易懂]-腾讯云开发者社区-腾讯云 (tencent.com)

懂]-腾讯云开发者社区-腾讯云 (tencent.com)](https://cloud.tencent.com/developer/article/2095025)