网站视频做背景,网页的制作教案,国家批准的正规学历提升机构,智联招聘官方网一、el-scrollbar和浏览器原生滚动条一起出现
问题描述
el-scrollbar组件主要用于替换浏览器原生导航条。如下图所示#xff0c;使用el-scrollbar组件后#xff0c;发现未能成功替换掉浏览器原生导航条#xff0c;二者同时出现。
引发原因
el-scrollbar的height属性如果…一、el-scrollbar和浏览器原生滚动条一起出现
问题描述
el-scrollbar组件主要用于替换浏览器原生导航条。如下图所示使用el-scrollbar组件后发现未能成功替换掉浏览器原生导航条二者同时出现。
引发原因
el-scrollbar的height属性如果不设置则会根据父容器高度自适应。父容器是一个id为app的div从控制台中发现父容器div的高度被填充到了 3000px而当前视口的最大高度(100vh)为 920px所以同时显示出了el-scrollbar和浏览器的原生导航条。
解决方法
给el-scrollbar设置高度height100vh。
templateel-scrollbar height100vhrouter-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 :right60 :bottom60div classicon-backtop/div
/el-backtop三、使用el-anchor后滑动滚动条无法监听锚点变化
问题描述 el-anchor组件是锚点导航栏用于页面内容定位。如下图所示让页面向下滚动发现锚点不会随着页面内容的改变而进行切换。
引发原因
el-anchor监听滚动的容器默认值为 ‘—’应该设置为el-scrollbar监听滚动条滚动。
解决方法
给el-anchor设置滚动容器container.el-scrollbar__wrap。
el-anchor:markerfalserefanchorRefdirectionhorizontalcontainer.el-scrollbar__wrap
el-anchor-link.../el-anchor-link
/el-anchor
