el-scrollbar 获取滚动条高度并将滚动条保持在低端

paintstar

于 2025-05-18 15:44:03 发布

阅读量497

点赞数 2

CC 4.0 BY-SA版权

文章标签：前端 vue css3 学习

本文链接：https://blog.youkuaiyun.com/m0_66100833/article/details/148045111

首先我们用ref绑定一个 scrollbar

  <el-scrollbar style="height: 100%;" ref="chatScrollRef" @scroll="scrollTest">

用scroll触发滚动事件，一路滚到最底下，观察三个属性

const scrollTest = ({scrollTop}) => {
  console.log(scrollTop);
  const wrap = chatScrollRef.value?.wrapRef
  if (wrap) {
    console.log("------" + wrap.scrollHeight);
    console.log("++++++" + wrap.clientHeight);
    
  }
}

在这里插入图片描述
得出结论，当 scrollTop + clientHeight = scrollHeight 的时候，滚动条会达到最低端

1. 得到滚动条距离顶端高度

先绑定ref

const wrap = chatScrollRef.value?.wrapRef
console.log(wrap.scrollTop);

2. 将滚动条调整在最低端

先绑定ref

const scrollToBottom = () => {
    const wrap = chatScrollRef.value?.wrapRef
    if (wrap) {
      wrap.scrollTop = wrap.scrollHeight - wrap.clientHeight
    }
  })