得到了一个持续更新的github笔记，大家可以去看看，诚意之作（原来是写给自己看的。。。）链接地址：Front-End-Basics本文地址：Vue的自定义滚动，我使用el-scrollbar基础笔记的github地址：https://github.com/qiqihaobenben/Front-End-Basics，大家可以围观或star。文本开始...为什么要使用el-scrollbar？最近在写一个内部平台系统。相信大家都知道，自定义的滚动区域会有很多。比如有一个列表需要滚动，首先想到的是使用overflow:scroll;啊!嗯，也不是没有可能！如果我从未见过太阳，我就能忍受黑暗。你总能看到许多优雅的滚动条实现。不可否认，美是令人愉悦的。所以这些年我一直带着愧疚的行走在江湖之中，让所有人都脸色难看。为什么要用el-scrollbar，大家都知道模拟一个滚动并不难，市面上有很多这样的库。我仔细想想。首先项目使用的框架是Vue，然后使用的组件库是Element。Element官网也有很多滚动，像Select组件这样的下拉框也有滚动，不用考虑选什么。这很简单。如果要使用Element自带的滚动条，不需要引入任何其他包或文件。看Element官网，找不到Scrollbar组件。没有文档，但可以直接使用。为什么写这篇文章？第一，好久没写东西了，先热热身吧；第二，有些同学真的不知道怎么用，可能是没有文档吧~先来看看它的外观吧。看到效果后，我们再来看看如何找到这个组件。官方没有提供文档，但确实是直接可用的组件。为什么这么说，这个我们以后再说。让我们看一下Element项目的一些基本概念。在Element的贡献指南中，提到了搭建开发环境和打包代码的说明。使用npmrundist打包代码，我们可以在package.json中看到这条指令的具体操作。我们简单看一下build/webpack.conf.js这个文件，发现打包后的文件入口是./src/index.js。我们再来看看这个文件。除了在原型上安装vue的插件和挂载对象外，里面的内容就是通过插件的方式注册Element组件。当然，它也随安装包暴露了安装后要使用的所有方法和属性。其实我们已经看到了Scrollbar的身影。然后按照package/scrollbar/index.js的文件。简单引入这个组件后，增加了一个install方法，提供给Vue的use方法，然后直接导出。进入src/main.js文件，查看组件接收到的props:native属性：如果为true，则不显示el的bar，即el模拟的滚动条，如果为false，模拟滚动条会显示About标签属性，可以在el的Select组件中查看应用。画个图看看view和wrap这两个区域的区别：尝试使用显示的链接：el-scrollbartrial考虑到有些同学有时打不开上面的链接，把代码贴出来。HTMLlist:
