滚动条一般个人喜欢用ref,比如
<el-scrollbar @scroll="handleScroll" ref="scrollbar">
</el-scrollbar>
然后用@scroll监听滚动事件
function handleScroll(){
// 处理滚动事件
const wrap = scrollbar.value.wrapRef; // 通过 wrapRef 获取滚动容器
if (!wrap) return;
// 当前滚动高度
const scrollTop = wrap.scrollTop;
// 可滚动内容的总高度
const scrollHeight = wrap.scrollHeight;
// 容器的可见高度
const clientHeight = wrap.clientHeight;
console.log(scrollTop+"滚动高度");
console.log(scrollHeight+"可滚动内容的总高度");
console.log(clientHeight+"容器的可见高度");
// 判断是否滚动到底部
if (scrollTop + clientHeight >= scrollHeight - 10) {
console.log("滚动到底部了,加载更多数据");
}
}
假如说要实现事件触发导致滚动条保持在最下面,类似于聊天记录那种,可以这样写
wrap.scrollTop = wrap.scrollHeight; // 滚动到底部
Vue实现滚动条定位功能
1816

被折叠的 条评论
为什么被折叠?



