滚动条美化实践（原生js，iscroll，nicescroll）

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

近期需要改造项目中的滚动条，使原滚动条在三大浏览器下表现相同，分享一下自己的改造经历：

项目中的滚动条分布在网页的各个小窗口中，使用的是-webkit-scrollbar制作，在-webkit内核的浏览器下表现非常漂亮，但是在ie和火狐下无法兼容，还是非常丑的默认样式。

原计划使用css hack打个补丁美化一下，想到ie hack以后变色的默认滚动条，觉得浑身“蓝瘦香菇”。于是决定重写一下这个部分，反正以后用到的地方可以直接拿出来用。

第一次计划打算自己手写，反正逻辑挺简单的，设定个比例拖着走呗

简单代码如下：

//获取页面元素，有用的元素包括“视框”，“滚动内容”，“滚动条”，“滚动轨迹” var box = document.getElementById("box"); var content = box.children[0]; var scroll = box.children[1]; var bar = scroll.children[0]; //首先要根据box和content的大小比例计算出bar的高 var bili = box.offsetHeight / content.offsetHeight; //用scroll的高乘以比例 bar.style.height = scroll.offsetHeight * bili + "px"; //点住滚动条bar，计算鼠标在bar内的位置 bar.onmousedown = function (e) { var y = e.clientY - bar.offsetTop - box.offsetTop; //开始拖动 document.onmousemove = function (e) { //获取鼠标的新位置 var currentY = e.clientY - y - box.offsetTop; //需要跟currentY设定上下限 if (currentY < 0) { currentY = 0; } if (currentY > scroll.offsetHeight - bar.offsetHeight) { currentY = scroll.offsetHeight - bar.offsetHeight; } //设置为bar的top值 bar.style.top = currentY + "px"; //取消滚动时的文本选中 window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); //让文本移动，比例换算。。 content.style.top = -currentY / bili + "px"; } }; document.onmouseup = function () { document.onmousemove = null; }

这样就完了？呵呵别天真了

滚动条的位置如图，滚动条在menu位置滚动是不受任何影响的，一旦移入右侧的ifarme嵌入的窗口就失效了，原因就是上述代码中绑定的document在iframe窗口中也存在。

如何解决这个问题，在网上找了大半天没相关结果，结果一个qq群小伙伴给了个网站document.domain，有了点想法,主要的一点是找到这个iframe，再给这个ifame绑定上事件监听。

关键的一点 $("iframe").contents().find("body").mousemove(function(){ someting to do })

同理当鼠标抬起的时候也绑定到这个上面。

这里注意防止鼠标拖动和鼠标抬起的目标元素不一样导致的bug，要在根document和iframe里的document里面都绑定上事件监听。呵呵...感觉好傻（这里的代码已经遗失了，不过很简单，上面的原生的js代码已经被我写成了jQuery的）

如果你只实现一个可以在iframe边缘拖动的滚动条现在已经可以了，但是领导说还要实现滚轮在menu列表上滚动，也可以调用滚动条，想想还是用个插件，可以实现跟多的功能。

找到的第一款插件是 iscroll github地址中文文档地址

基本的使用在github上就可以看到，但是我当时没有发现设置样式（例如,颜色、宽高的功能）

于是在源码中做了如下修改

在1002和1009行做了如下修改

加了一个参数 this.options.myStyle

el: createDefaultScrollbar('v', interactive, this.options.scrollbars, this.options.myStyle) //v 代表verticalel: createDefaultScrollbar('h', interactive, this.options.scrollbars, this.options.myStyle) //h 代表horizontal

1662行加入了一个参数myStyle

function createDefaultScrollbar (direction, interactive, type, myStyle)

1668行加入了这段代码

// 自定义样式 if(myStyle){ //传入的是一个对象 var cssString = indicator.style.cssText; var newCssString = ''; var arr = cssString.split(';'); var obj ={}; for (var i=0; i<arr.length; i++){ //生成默认样式的对象形式 var tempArr = arr[i].split(':'); obj[tempArr[0]]=tempArr[1]; } /*如果有新的属性替换原有属性，如果没有添加，默认使用原来的 * */ for(var k in obj ){ for(var j in myStyle){ if(j==k){ obj[k]=myStyle[j]; }else{ obj[j]=myStyle[j]; } } }; for(var k in obj){ newCssString += k + ':' +obj[k] +'\;' ; } indicator.style.cssText = newCssString; }

然后在公用组件的js加入如下代码

/* * 初始化滚动条 * 需要依赖iscroll.js * @param * viewbox 滚动的部分外层的窗口使用querySelector就可以 * fadeScrollbars 是否需要显示/隐藏滚动条 true/false * myStyle 用于自定义样式，如果自定义了样式会覆盖默认样式，否则使用默认样式数据类型对象->{'background-color':'red'} * * *///绘制滚动条function scrollInit(viewbox,fadeScrollbars,myStyle){ function loaded (viewbox,fadeScrollbars,myStyle) { var myScroll = new IScroll(viewbox, { scrollbars: true, mouseWheel: true, interactiveScrollbars: true, shrinkScrollbars: 'scale', fadeScrollbars: fadeScrollbars, //不激活状态下是否隐藏滚动条 myStyle:myStyle }); } document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); loaded(viewbox,fadeScrollbars,myStyle);}

然后在列表数据渲染后再调用scrollInit方法就可以了。

但是同样到这里还是无法解决滚动条在iframe边缘的问题，但是这次的表现是在iframe上拖动滚动条可以移动，在menu区域拖动没有办法移动。

做到这里我放弃了这个插件，为什么？因为项目要兼容到ie8，一不小心看到了一个transfrom translate属性在控制滚动条的位置，呵呵，以后一定好先看好兼容性。

查看css的兼容性最好的网站 CANIUSE.COM

第二个插件jQuery.nicescroll

看到这个插件的滚动条的位置使用position控制，我就放心了

nicescroll支持设置css样式，所以对于我的需求只要满足在iframe边缘不存在影响就好了

于是对源码做出如下改动

在1760行绑定事件的地方，加入如下代码即可

if(parent.document){ self.bind((cap.hasmousecapture) ? self.win : parent.document, "mouseup", self.onmouseup); self.bind(parent.document, "mousemove", self.onmousemove); };

同时将工具库里的代码替换成这个

加一个preViewbox的原因是，滚动条部位的数据会随着页面操作局部刷新，但是绘制代码要跟随执行，防止重复绘制，进行一次判断

同其他工具一样，都挂到jQuery上。

//绘制滚动条 var preViewbox = null; $.scrollInit = function(viewbox,color,hidden){ if(viewbox == preViewbox){ $('div[class^=nicescroll]').remove(); //如果以前绘制过将以前的移除 } preViewbox = viewbox; $(viewbox).niceScroll({ cursorcolor: color,//#CC0071 光标颜色 cursoropacitymax: 1, //改变不透明度非常光标处于活动状态（scrollabar“可见”状态），范围从1到0 touchbehavior: false, //使光标拖动滚动像在台式电脑触摸设备 cursorwidth: "5px", //像素光标的宽度 cursorborder: "0", // 游标边框css定义 cursorborderradius: "5px",//以像素为光标边界半径 autohidemode: hidden //是否隐藏滚动条 }); }

然后在想绘制滚动条的部位调用scrollInit就可以了。

看似简单的一次改动，踩了不少坑，还是自己对iframe嵌套后与原页面的关系没有理清，分享自己的逗逼经验，希望能帮到需要的人。

菜鸟日记，大神轻喷....