![bf91b32cb06c49ee56bcf071f41e7941.png](https://i-blog.csdnimg.cn/blog_migrate/ee9d907b5198b976711d0adb5be9304a.png)
首先从上述路径可以看见scrollbar这个组件是存在的
渲染出来层级
*el-scrollbar(下面是自动渲染出来的不需要写在代码里)
*el-scrollbar__wrap
*el-scollbar__view
*el-scollbar__bar is-horizontal
*el-scollbar__thunmb
*el-scollbar__bar is-vertical
*el-scollbar__thunmb
![79a1d9d952b008e1ac8734a1f5257ddb.png](https://i-blog.csdnimg.cn/blog_migrate/f0a404023996fd2fea4622eb2eae805b.png)
2、从文件看看怎么引入
![a424c454a0865a73757dfe46adc438d3.png](https://i-blog.csdnimg.cn/blog_migrate/dd9980da5ab61515243e57601a9d4e2a.png)
3、将组件引入要使用的文件中
![7e989dde4f7313f8136de7c77b000b01.png](https://i-blog.csdnimg.cn/blog_migrate/ed817a9943cb0e5fbdecf36a81a2bddb.png)
![22b7f90a935b3f8f72c206a3d3d64fdf.png](https://i-blog.csdnimg.cn/blog_migrate/95efdcf74a9f618ccf67daa2e346b1e6.png)
4、必备元素
![d9951ad8140c7c1c78115c9c49aecb5d.png](https://i-blog.csdnimg.cn/blog_migrate/8097d8b2acbc0eccfa3bb9b3ee3e3c14.png)
(1)外层定高的div
(2)el-scrollbar height设为100%
![70c64d8fc88c751359f51802742f367b.png](https://i-blog.csdnimg.cn/blog_migrate/1497c400e4756c17062a9b3e4e2c3210.png)
3)可以通过
el-scrollbar 内的el-scrollbar__wrap的 隐藏水平/垂直的滚动条
overflow-x:hidden; //隐藏水平滚动条
overflow-y:hidden; //隐藏垂直滚动条
(4)通过无限滚动组件设置无限滚动(见vue文档)The world's most popular Vue UI framework
![70d3eb56edb5c829d09c8a77a8a0a638.png](https://i-blog.csdnimg.cn/blog_migrate/3ba148e5c55e5e9ee25f135ef7f93249.png)
(记得判断到最后一页的时候不要再执行loadMore不然会无限发送新请求)
4、效果
![c4ffb0998353d67e94a9b80a72be7564.png](https://i-blog.csdnimg.cn/blog_migrate/c76e67ae91180280fa0fbb3bdde632ac.png)