el-scrollbar组件使用踩坑记录

一、el-scrollbar和浏览器原生滚动条一起出现

问题描述

el-scrollbar组件主要用于替换浏览器原生导航条。如下图所示，使用el-scrollbar组件后，发现未能成功替换掉浏览器原生导航条，二者同时出现。

引发原因

el-scrollbar的height属性如果不设置，则会根据父容器高度自适应。父容器是一个id为app的div，从控制台中发现，父容器div的高度被填充到了 3000px，而当前视口的最大高度(100vh)为 920px，所以同时显示出了el-scrollbar和浏览器的原生导航条。

解决方法

给el-scrollbar设置高度height="100vh"。

<template><el-scrollbar height="100vh"><router-view /></el-scrollbar>
</template>

二、使用el-scrollbar后el-backtop不显示的问题

问题描述

el-backtop组件是一个返回页面顶部的操作按钮。让页面向下滚动，直到底部都没有显示返回顶部按钮，去掉el-scrollbar后发现返回顶部按钮可以正常显示、使用及隐藏。

引发原因

el-backtop的target属性用于设置触发滚动的对象，默认是document.documentElement对象。使用el-scrollbar后，由于替换了浏览器原生导航条，所以监听不到document.documentElement对象发生滚动，应该修改为监听el-scrollbar滚动。

解决方法

给el-backtop设置滚动对象target=".el-scrollbar__wrap"。

<el-backtop target=".el-scrollbar__wrap" :right="60" :bottom="60"><div class="icon-backtop">🔝</div>
</el-backtop>

三、使用el-anchor后滑动滚动条无法监听锚点变化

问题描述
el-anchor组件是锚点导航栏，用于页面内容定位。如下图所示，让页面向下滚动，发现锚点不会随着页面内容的改变而进行切换。

引发原因

el-anchor监听滚动的容器默认值为 ‘—’，应该设置为el-scrollbar，监听滚动条滚动。

解决方法

给el-anchor设置滚动容器container=".el-scrollbar__wrap"。

<el-anchor:marker="false"ref="anchorRef"direction="horizontal"container=".el-scrollbar__wrap"
><el-anchor-link>...</el-anchor-link>
</el-anchor>