要做自定义滚动条就要做到最好的scroll-div

前言

关于自定义滚动条的方案，我之前写过一篇文章，但是当时写那篇文章的侧重点是教大家怎么实现基础的能够自定义的滚动条，而没怎么注重介绍我封装的那个一个vue组件，也没什么效果图，介绍功能啥的。

而我自己也在项目中使用了，之前做的组件虽然已经满足了较多场景了，但是我在复杂的工程中使用了，体验了，发现还是有更多场景待开发，以及一些bug需要修复。经过了实际项目的应用后，已经把该组件完善得较好了。

加上最近身边有不少同事朋友都有需求，在找一款能兼容尽量多浏览器的自定义滚动条组件，刚好问到我了，我就介绍我封的这个组件给他们了。他们说我这个确实好用，但是就是推广做得少，几乎没人知道，叫我要不写个软文宣传一下，加之npm上的文档，没有示例，让人也不好有直接的感受。

出于此目的，本篇着重介绍一下该组件的使用效果，以及它有什么优点，你为什么要选择它！

安装组件

• npm包 vue-scroll-div
• 直接script引入线上资源地址： //unpkg.com/vue-scroll-div/lib/vue-scroll-div.umd.min.js

主要特点

• 多平台浏览器兼容，不再单纯使用-webkit-scrollbar支持webkit内核的浏览器，连火狐、IE等非webkit内核浏览器也支持自定义滚动条。不再自欺欺人
• 智能选择自定义滚动条方案。除了限定固定自定义滚动条模式外，还能开启智能优化选择模式，能够针对不同的浏览器特性，选择性能最好的自定义滚动条方案：
  • MacOS上的浏览器本身滚动条效果已经很好了，所以在MacOS上不做改变，应用原本的浏览器，最终组件只会渲染成普通的div
  • webkit内核的浏览器，由于支持-webkit-scrollbar等CSS样式直接修改滚动条样式，那么就会选择用CSS的方式来指定自定义滚动条
  • 其他浏览器，就会屏蔽掉原本的滚动条，利用HTML元素来模仿滚动条效果，显然这种方式的渲染成本会增大。
• 弥补火狐和IE浏览器,对于padding-bottom设置"不起作用"的缺陷问题,行为跟chrome等浏览器保持一致性
• 自定义滚动条是悬浮内容上方的，不会挤兑容器空间
• 支持全局设计所有用到的滚动条各参数
• 使用方便，用法跟使用一个div的理念是一样的，你就可以把该组件当成一个div来使用。
• 其他更多特点详见说明文档

使用效果

还是先睹为快吧，没有直接的视觉感受，大家都不确定是否自己要找的东西

注意gif中滚动条有一些点点的颜色，是录gif工具截图生成造成的影响，并不是组件的问题

仿MacOS效果

上图仿MacOS的滚动条效果，只有在容器内发生滚动，就显示处滚动条，不操作后延迟一定时间消失。

也可以鼠标悬浮在滚动条所在区域（一般就是边边），也能显示处滚动条，可以进行拖动滚动，而且只要按住发生拖动，就算鼠标离开容器，也能触发滚动。

响应容器大小变化

上图表示该组件，能够响应容器的大小变化，如屏幕大小发生了变化，或者容器内展示的数据发生变化（如请求后获取数据等），滚动条能够自动响应这种变化，进而调整自身的显示长度和可移动距离。

自定义滚动条样式

示图只是改变了滚动条的颜色，但是你可以自定义滚动条的更多样式，如滚动条的宽度，圆角等各种情况。提供了十分便利自由的配置项