el-scrollbar搭配el-backtop滚动到最顶/最底 & el-scrollbar在focus时出现黑框的解决办法

AlexJee2025-04-22 13:55

如何搭配 el-scrollbar 和 el-backtop，使其点击后滚动到底部：

html 复制代码

<template>
  <!-- 一个el-scrollbar区域，其ref是chatArea -->
  <el-scrollbar @scroll="(e: any) => { tempHeight = e.scrollTop }" ref="chatArea" always>
  </el-scrollbar>
	<el-backtop :right="40" :bottom="195" :visibility-height="0" @click="goToPlace" />
	<!-- 如果要滚动到最顶部，则可以将goToPlace中的top设为0，或者直接用target -->
  <!-- <el-backtop :right="40" :bottom="195" :visibility-height="0" target=".chat-area .el-scrollbar__wrap" /> -->
</template>
<script>
const goToPlace = () => {
  chatArea.value!.scrollTo({
    top: chatArea.value.wrapRef.scrollHeight,
    behavior: 'smooth'
  })
}
</script>
<style scoped lang="scss">
  /** 如果是要滚动到最底部，则应该让svg箭头图标指向下方 */
  :deep(.el-backtop svg) {
    transform: rotate(180deg);
  }
</style>

另外，当鼠标单击被el-scrollbar包围的区域，然后按下enter键，会发现这时el-scrollbar区域被一圈黑框围起来了，其实这是它的outline属性没被隐藏。解决办法：

css 复制代码

:deep(.el-scrollbar__wrap.el-scrollbar__wrap--hidden-default:focus) {
  outline: none;
}