广东智唯网站建设公司,加盟培训机构,网站备案空间备案,百度域名书写需求
在一个区域会依次打印log#xff0c;随着log的加长#xff0c;出现滚动条#xff0c;而滚动条应该始终保持在最下方。 点击回到顶部按钮#xff0c;可以使滚动条回到最上方
方案
在滚动区域添加reflog为一个数组#xff0c;对其添加watch在watch函数中#xff0c…需求
在一个区域会依次打印log随着log的加长出现滚动条而滚动条应该始终保持在最下方。 点击回到顶部按钮可以使滚动条回到最上方
方案
在滚动区域添加reflog为一个数组对其添加watch在watch函数中使用nextTick通过ref控制该区域滚动高度绑定ref监测其height使回到顶部按钮出现并通过ref控制滚动条回到顶部
代码
// template
div classbottom-logs reflogRef// antd vue中的back-top组件a-back-top :target() logRef :visibilityHeight10 clickhandleBackToTop /LogData :logDatalog/LogData
/div// css
// 父级元素 display: flex
.bottom-logs {flex: 1;overflow: auto;
}script setup
import { ref, watch, nextTick } from vue
const logRef ref();
// log为响应式数组
watch(log, () {nextTick(() {const content logRef.value;content.scrollTo({ top: content.scrollHeight, behavior: smooth });});
}, {deep: true,
});const handleBackToTop () {const content logRef.value;content.scrollTo({ top: 0, behavior: smooth });
}
/script
