利用CSS3新特性实现完全兼容的自定义滚动条。

背景:最近项目里面因为统一页面风格,用到了自定义滚动条,在完成之前的那个滚动条的时候,与网上各个滚动条插件实现的方法类似,相当于造了*,通过css3的

网上看到的滚动条插件多数是通过监听内容的滚动事件,由于原生js的滚动事件存在一些bug,所以实际上用jQuery的mousewheel.js插件的比较多,自己做的滚动条也是引用了该插件。

首先说一说自定义滚动条实现的普遍步骤和方法

  背景: A需要滚动。

  1.给A添加一个父级S包裹,并将B进行绝对或相对定位(这点根据S的定位,目的是为了保持原有布局)。

  2.在S中生成A的兄弟节点B,B作为滚动条的容器,然后在B中生成滚动条bar,bar的高度通过容器S高度和A实际高度得出。

  3.监听S的滚动事件,并在滚动事件中对A、bar进行top设置(横向滚动原理相同),这一点实现了自定义滚动条随内容滚动而位移。

  4.监听滚动条bar的拖动事件,原理是监听bar的父级B的mouseDown和mouseUp事件,在鼠标按下的时候计算鼠标位移的距离,然后对应的修改A的top和bar的top。

以上就是普遍自定义滚动条的实现原理,在第3、4步中,需要设计算法保证正常的运行。

自己在写滚动条的时候,写到第4步就有了新的想法:省去第4步,滚动还是用浏览器自带的滚动条,样式自定义。这样做的好处有以下几点:

  1.拥抱原生,减少代码,也减少了计算过程中容易导致的bug。

  2.浏览器的滚动条功能已经完善,而自定义滚动条目的只是修改样式。

  3.不必考虑兼容性。

利用CSS3新特性实现完全兼容的自定义滚动条。

上图为大致结构:A是内容部分,B是原生滚动条,C是自定义滚动条,C遮挡住B。

使用上面的步骤1、2、3我们可以实现滚动A时C随动的视觉效果,但是如何让C和B具有相同的功能,也就是如何让C控制A呢?还是看图

利用CSS3新特性实现完全兼容的自定义滚动条。

这是实现的效果图,这个想法能够实现得益于CSS3的新样式: pointer-events


pointer-events:auto | none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all

默认值为auto,但是除了 auto 和 none,其它值只能用于svg上。

通过对C设置pointer-events:none样式后,C就可以不响应各种事件,并且不会阻止冒泡,相当于在用户眼睛蒙了一层C,用户实际操纵的是B,也就是使用的原生的滚动条。

我已经把滚动条封装在jQuery对象中,在使用的时候只需要引用该方法 $.lon_creatscroll(a,b,c) 并且指定内容部分和父级容器和滚动条颜色。

下面就是上图两个容器滚动条的实现代码。

利用CSS3新特性实现完全兼容的自定义滚动条。

源码中有更详细的实现步骤和注释,需要的可以访问 我的GitHub

上一篇:利用HTML5新特性改变浏览器地址后不刷新页面


下一篇:poj-1170 (状态压缩形式下的完全背包)