element-ui之el-scrollbar源码解析学习

最新推荐文章于 2024-07-01 16:38:53 发布

ducode

最新推荐文章于 2024-07-01 16:38:53 发布

阅读量2.4k

点赞数 1

文章标签： ui python javascript ViewUI

原文链接：https://my.oschina.net/wangch5453/blog/2980404

版权

本文主要解析了Element-UI中el-scrollbar组件的源码，探讨了其在处理滚动条样式和滚动加载时的优势。文章通过实例展示了组件的使用方式，并详细分析了组件的HTML结构和核心逻辑，包括滚动事件监听、滚动条长度更新以及拖拽滚动的实现机制。通过对源码的解读，有助于理解组件的设计思路和工作原理。

摘要由CSDN通过智能技术生成

2019独角兽企业重金招聘Python工程师标准>>>

最近使用vue在做pc端项目，需要处理滚动条样式外加滚动加载。

使用了betterscroll和perfectscroll发现前者还是更偏向于移动端（也可能我比较着急没用明白），

后者在ie11上面拖拽滚动条的时候会闪动，会有兼容性问题。

经同事点播，最终使用了element-ui里面的scrollbar，发现还真是不错，用着简单而且兼容性好。

所以，来看看源码是怎么实现的，学习学习，进步进步。

先看一下怎么使用，便于理解组件的设计思路

<el-scrollbar class="content-table" :tag="'div'">
	<div v-for="(info, idx) in tab.humanInfo" :key="idx">
		<div></div>
	</div>
</el-scrollbar>

如上图代码，直接把会很长的需要滚动的内容放到el-scrollbar组件里面就好，其他细节不做赘述。

生成的html代码如下，这张图pic-html的内容后面会多次提及。

根据对照页面上的效果可知，div.el-scrollbar是最外层的容器，可以通过写自己的class来添加出现滚动条的高度。

.el-scrollbar{
  overflow: hidden;
  position: relative;
}

div.el-scrollbar__wrap是实际上真正用来包裹内容并产生滚动条的容器，高度100%，div.el-scrollbar__view里面就是我们自己写的需要滚动的内容。

.el-scrollbar__wrap{
  overflow: scroll;
  height: 100%;
}

div.el-scrollbar__bar是滚动条的轨道，分为横向和纵向，横向为is-horizontal，纵向为is-vertical，两者其实差不多，就只关注纵向了。鼠标划入划出滚动区域，滚动条会随之显示隐藏。

.el-scrollbar__bar {
    position: absolute;
    right: 2px;
    bottom: 2px;
    z-index: 1;
    border-radius: 4px;
    opacity: 0;
    -webkit-transition: opacity 120ms ease-out;
    transition: opacity 120ms ease-out;
}
.el-scrollbar__bar.is-vertical {
    width: 6px;
    top: 2px;
}

div.el-scrollbar__thumb在div.el-scrollbar__bar内部，作为滚动条，hover会产生背景色的变化

.el-scrollbar__thumb {
    position: relative;
    display: block;
    width: 0;
    height: 0;
    cursor: pointer;
    border-radius: inherit;
    background-color: rgba(144,147,153,.3);
    -webkit-transition: .3s background-color;
    transition: .3s background-color;
}

ok，到这里就把html结构大致分析完了，接着来看源码了，看看到底咋回事儿了

scrollbar/src/main.js就是组件主入口文件了，首先看一下里面写了什么

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

props主要传入内联样式和自定义class，都以默认值来分析代码降低不必要的复杂度