el-scrollbar 使用以及滚动到指定位置

(55) 2024-04-29 16:01:01

文章目录

  • 写在前面
  • 开始使用
  • 滚动到自定义位置
  • 动态滚动条

写在前面

浏览器默认的滚动条样式不是很美观;

其实,在 element-UI 中有一个隐藏组件 <el-scrollbar>,这个组件的滚动条还是很不错的,比原生的滚动条好看,而且还有一些效果(鼠标移入时显示,移出时隐藏)。

el-scrollbar 使用以及滚动到指定位置 (https://mushiming.com/)  第1张

所以,我们直接使用它就省事很多啦~

开始使用

<el-scrollbar>
  // 包裹你的内容
</el-scrollbar>

这个组件还有一些属性值可以传递:(不过一般用不着)

props: { 
   
  native: Boolean,
  wrapStyle: { 
   }, // 外层盒子的样式
  wrapClass: { 
   }, // 外层盒子的class
  viewClass: { 
   }, // 内层盒子的class
  viewStyle: { 
   }, // 内层盒子的样式
  noresize: Boolean, // 如果 container 尺寸不会发生变化,最好设置它可以优化性能
  tag: { 
   
    type: String,
    default: 'div'
  }
}

el-scrollbar 将会作为你的容器最外层,也是滚动条的容器;
一个比较好的使用方式是:el-scrollbar 加上 ref 以及 class 用来定义宽度和高度。

需要注意的是:el-scrollbar 上定义 maxHeightmaxWidth 将无法实现预期效果。

滚动到自定义位置

假设现在滚动条滚到了底部,如果将其滚到我们想要的位置

<el-scrollbarl ref="scroll">
  // ...
</el-scrollbar>

可以使用如下代码:

this.$refs['scroll'].wrap.scrollTop = 0  //想滚到哪个高度,就写多少

为了让整个滚动更加丝滑,我们再加上滚动动画:

<el-scrollbarl ref="scroll">
  // ...
</el-scrollbar>
<el-button @click="toTop">滚动到顶部</el-button>

<script> const cubic = value => Math.pow(value, 3); const easeInOutCubic = value => value < 0.5 ? cubic(value * 2) / 2 : 1 - cubic((1 - value) * 2) / 2; //... methods: { 
     toTop() { 
     // el-scrollbar 容器 const el = this.$refs['scroll'].wrap; const beginTime = Date.now(); const beginValue = el.scrollTop; const rAF = window.requestAnimationFrame || (func => setTimeout(func, 16)); const frameFunc = () => { 
     const progress = (Date.now() - beginTime) / 500; if (progress < 1) { 
     el.scrollTop = beginValue * (1 - easeInOutCubic(progress)); rAF(frameFunc); } else { 
     el.scrollTop = 0; } }; rAF(frameFunc); } } //... </script>

动态滚动条

内容高度小于100px 的时候,区域随内容高度自适应;内容高度大于 100px 时显示滚动条。

<el-scrollbar ref="scroll" :style="{ 
      height: getHeight()}">
  <div v-for="item of dataList">
	//...
  </div>
</el-scrollbar>

<script> //... methods: { 
     getHeight() { 
     if(this.dataList.length>5) { 
     return '100px' } else { 
     return 'auto' } } } //... </script>

-----------------(正文完)------------------

前端学习交流群,想进来面基的,可以加群:
el-scrollbar 使用以及滚动到指定位置 (https://mushiming.com/)  第2张 el-scrollbar 使用以及滚动到指定位置 (https://mushiming.com/)  第3张
或者手动search群号:685486827,832485817;

写在最后:
约定优于配置 —— 软件开发的简约原则

--------------------------------
(完)--------------------------------------

我的:
个人网站: https://neveryu.github.io/neveryu/
Github: https://github.com/Neveryu
新浪微博: https://weibo.com/Neveryu

更多学习资源请关注我的新浪微博…

THE END

发表回复