滚动条美化实践（原生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;
} View Code这样就完了？呵呵别天真了
滚动条的位置如图，滚动条在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 代表vertical
el: 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){ //检查如果以前绘制过，就不再绘制
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嵌套后与原页面的关系没有理清，分享自己的逗逼经验，希望能帮到需要的人。
菜鸟日记，大神轻喷....