javascript 模拟html元素滚动条，jscroll
javascript 模拟html元素滚动条，jscroll<div id="cnblogs_post_body"> 主流浏览器默认为html元素提供的滚动条不美观，而且前端开发人员想对其通过css进行统一样式的美化也是不可实现的。比如ie可以通过样式来实现简单的美化、Webkit内核浏览器可以控制滚动条的显示效果，firefox则不允许用户为滚动条定义样式。但是对于追求友好的用户体验的前端开发人员，是不会被这些浏览器的不一致行为所阻止的。我们可以自己通过标准的html元素模拟来实现自定义的滚动条。
这里是自己在工作不太忙的时候写出来了一个用户可以自定义的滚动条jscroll，以下简称jscroll。jscroll默认只提供一种滚动条样式，部分样式来自google webstore ，其中有部分css3样式主要用于实现圆角，阴影效果。为实现跨浏览器情况下滚动条显示效果的一致，对于ie6, 7, 8不支持css3的浏览器引入了 PIE.htc 文件。下面就实现的功能以及兼容性、使用方法、具体代码实现分别做一下讲解。
实现功能以及兼容性
jscroll实现了系统默认滚动条的几乎所有功能，比如：拖动滚动条查看内容、滚动鼠标滚轮查看内容、点击滚动条可到达区域的上方或者下方来触发滚动条的滚动、键盘上下键来触发滚动条的滚动。firefox、chrome,、ie9+ 等最新浏览器支持css3以及js的最新API，所以没有任何兼容性问题。ie6, 7, 8 不支持css3通过引入PIE.htc 的hack文件来做兼容处理。js方面对于不支持的API通过旧的API来做了兼容。有最大兼容性问题的浏览器是ie6，不支持点击滚动条可到达区域来触发滚动条滚动，也不支持键盘上下键来触发滚动条的滚动。导致这个问题的原因主要是因为引入了支持css3的PIE.htc文件，如果不引入该hack文件，所有操作都能支持，没法办为了显示效果的一致，只好选择了不支持部分功能。
使用方法
使用自定义滚动条最多的情况应该是页面弹出层，或者是页面上某一个区域，千万不要对整个页面的滚动条进行自定义操作。对于需要使用jscroll的元素，需要添加自定义属性data-scroll="true"来告诉程序需要使用jscroll来替换系统默认的滚动条，同时还需要通过添加自定义属性data-width=""、data-height=""来指定元素要显示的宽度和高度。jscroll会根据用户定义的宽度和高度计算内容的显示宽度以及滚动条显示的高度并添加交互的事件。
具体代码实现
jscroll的实现逻辑并不复杂，实现具体功能的js代码不到400行，但是这里依赖了一些基础的方法，所以需要引入squid.js作为基础方法的支持。对滚动条样式的控制的css在一个单独的jscroll-1.0.css文件里面，用户可以自己修改扩展以满足自己的需求。下面是对实现具体功能的每个方法做一个简单的分析：
<div class="cnblogs_Highlighter">init: function(selector, context) {selecotr = selector || 'data-scroll'context = context || documentvar elems = squid.getElementsByAttribute(selector, context)this.initView(elems)}
页:
[1]