自定义滚动条还能玩出花？

前言

关于自定义滚动条的方案，我之前写过一篇文章，但是当时写那篇文章的侧重点是教大家怎么实现基础的能够自定义的滚动条，而没怎么注重介绍我封装的那个一个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的滚动条效果，只有在容器内发生滚动，就显示处滚动条，不操作后延迟一定时间消失。

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

响应容器大小变化

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

自定义滚动条样式

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

可根据浏览器智能选择最优方案

组件默认开启智能选择模式，目的是为了减少开销，优化性能，针对使用的浏览器平台背景而自动选择性能最好的方案。

当然你想让各个浏览器保持一样的滚动条交互效果，可以关闭该模式，采用指定的【仿MacOS】模式或【常驻滚动条】模式。

下面介绍智能模式的情况：

1. MacOS上的浏览器就不介绍了，是不针对MAC平台的浏览器处理，采用原本的滚动条。

2. chrome等webkit内核的浏览器，会智能选择采用css样式改造原生滚动条

3. 火狐IE等非webkit内核浏览器，采用HTML元素模仿滚动条

常驻滚动条模式

个别人的需求可能不偏好于MAC滚动条的效果，希望就是跟原生滚动条一样，常驻，只是样式优化下就好了，当然这样的话webkit内核浏览器用样式控制没问题，但是其他浏览器就不行了，这里还是得用自定义HTML元素模仿：

常驻模式看起来没啥差别，就是常驻

可以用火狐或ie浏览器来体验一下

图中也可以看到，滚动条是悬浮在内容上的，不会占用容器空间，进而挤兑内容。

使用教程

有能科学上网的，可以直接访问 github.io ，能更加直观的看到代码和展示demo的关系。

这个是线上编辑器codeopen，能直接线上体验效果，边改动代码边感受。

这里就简单介绍下使用的一些基本情况

默认情况

设置容器的宽高，请直接传值到props属性的width和height，以及你要设置padding。

可以直接传入calc(100% - 10px)这种字符串，支持数字类型和字符串。

view-class是为滚动容器添加类名，用于设置一些额外的样式，因为受到不同的自定义滚动条模式的影响，具体的滚动容器可能不一样。

注意view-class属性仅用来设置具体的滚动容器的一些样式，与滚动容器滚动无关的属性，直接请使用class。

不做滚动条显示模式设定的默认情况下，会根据您所在浏览器的特性而选择不同的方案

• macos 原生滚动条
• webkit内核使用css来美化原生滚动条
• 其他浏览器采用HTML元素模拟滚动条

<scroll-div
    width="400px"
    height="100px"
    padding="5px"
    view-class="yourclassname">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis quas nobis praesentium nisi deserunt, fuga libero, error quia vero nulla corporis odio fugit atque et accusamus numquam. Tempora, qui numquam!
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis quas nobis praesentium nisi deserunt, fuga libero, error quia vero nulla corporis odio fugit atque et accusamus numquam. Tempora, qui numquam!
</scroll-div>

仿MacOS效果

默认情况下useNative值为true，表示开启智能选择模式，即上述的默认情况，原生能支持就用原生的意思。

这里设置useNative="false"，关闭智能选择，固定采用仿MacOS的效果，即window系统下的所有浏览器都会采用自定义滚动条模拟

该模式能够很好地响应屏幕变化或内容变化引起的滚动容器滚动条长度的问题。

<scroll-div height="100px" :use-native="false">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis quas nobis praesentium nisi deserunt, fuga libero, error quia vero nulla corporis odio fugit atque et accusamus numquam. Tempora, qui numquam!
</scroll-div>

常驻滚动条模式

Windows上的火狐IE等这些非webkit内核的浏览器上，会采用HTML元素模仿滚动条，默认是仿MacOS效果的滚动条，即只有滚动了才会出现。

如果你不想这样，可以开启常驻滚动条模式，只需要设置awaysShowScroll="true"

同样可以结合useNative来使用，来更加自由的定制所需模式

本示例最好在火狐或IE上体验

<scroll-div height="100px" :aways-show-scroll="true">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis quas nobis praesentium nisi deserunt, fuga libero, error quia vero nulla corporis odio fugit atque et accusamus numquam. Tempora, qui numquam!
</
scroll-div>

自定义滚动条样式

组件本身已经自定义了相对大众美观一点的滚动条了，当然，你仍然有更好的自定义能力，可以通过barStyle, size, offset等参数进一步打造属于你的滚动条效果。

当然，这是针对用HTML元素模拟滚动条效果的情况下，才能生效的，即你得设置useNative=false

如果你仍然想要维持高性能的:use-native="true"智能选择模式下，在chrome这种webkit内核的浏览器上改变样式，你得自己在项目中写全局样式覆盖-webkit-scrollbar等样式。

<scroll-div
    height="100px"
    :use-native="false"
    :bar-style="{backgroundColor: 'pink', borderRadius: '6px'}">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis quas nobis praesentium nisi deserunt, fuga libero, error quia vero nulla corporis odio fugit atque et accusamus numquam. Tempora, qui numquam!
</scroll-div>

<scroll-div
    height="100px"
    :use-native="false"
    :bar-style="{backgroundColor: 'rgba(255, 192, 203, .5)'}"
    size="10px"
    offset="6px"
    :aways-show-scroll="true">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis quas nobis praesentium nisi deserunt, fuga libero, error quia vero nulla corporis odio fugit atque et accusamus numquam. Tempora, qui numquam!
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis quas nobis praesentium nisi deserunt, fuga libero, error quia vero nulla corporis odio fugit atque et accusamus numquam. Tempora, qui numquam!
</scroll-div>

支持全局设置

如果你的项目打算大量使用该组件，一个个设置一些一样的值，显然显得很累赘，本组件支持全局设置

import Vue from 'vue'
import ScrollDiv from 'vue-scroll-div'

Vue.use(ScrollDiv,{
  barStyle: {
    backgroundColor: 'pink', // 滚动条的颜色
  },
  size: 6, // 滚动条的大小
  offset: 2 // 滚动条距离边界的偏移量
})

后续

该组件仍然会不断完善，以满足更多的需求场景。