完美的自定义滚动条

In 未分类 on 2012年05月14日 by TAT.melody view: 12,002

今天写了一个滚动条 UI 组件。欢迎大家体验：http://alloyteam.github.com/ui/

为何称之为完美呢？只因其具有以下优点：

兼容所有浏览器。
支持所有鼠标事件，包括长按。
样式可以完全自定义。
使用该组件无需改动原来的任何代码，也不要求原来的元素使用什么定位方式。
只需引进一两个 js 文件，再添加一句代码即可。

下面讲核心部分。

首先关于鼠标长按事件，使用 setInterval 的方式

这里关键在于什么时候清楚定时器。首先，鼠标弹起时候要清除；第二种情况是不满足条件时要清除。下面把鼠标按在滚动槽中的鼠标响应事件的代码贴出来，以供参考：

slider.onmousedown=function(e){

e=e||event;

var id;

var mouseY=e.clientY;

function isUp(){

var rect=context.cube.getBoundingClientRect();

var y=rect.top;

if(y>mouseY){

up();

id||(id=setInterval(function(){isUp(y);},100));

return true;

}

else{

id&&clearInterval(id);

id=0;

return false;

}

function isDown(){

var rect=context.cube.getBoundingClientRect();

var y=rect.top;

if(rect.bottom<mouseY){

down();

id||(id=setInterval(function(){isDown(y)},100));

return true;

}

else{

id&&clearInterval(id);

id=0;

return false;

}

isUp()||isDown();

document.onmouseup=function(){

id&&clearInterval(id);

id=0;

document.onmouseup=null;

}

第二，关于如何做到使用该组件无需改动任何代码。

这里关键在于对要使用滚动条元素的定位方式进行分析，然后应用于我们生成的包含滚动条元素的 dom 节点，最后使用替换节点的方式把我们生成的 dom 节点插入文档中，具体代码如下：

var padding=0;

var position;

var float,margin,left,top,right,bottom;

if(el.currentStyle){

var paddingLeft=el.currentStyle['paddingLeft'];

var paddingRight=el.currentStyle['paddingRight'];

padding=parseInt(paddingLeft.substr(0,paddingLeft.length-2))+parseInt(paddingRight.substr(0,paddingRight.length-2));

position=el.currentStyle['position'];

float=el.currentStyle['float'];

margin=el.currentStyle['margin'];

left=el.currentStyle['left'];

top=el.currentStyle['top'];

right=el.currentStyle['right'];

bottom=el.currentStyle['bottom'];

}

else{

var computedStyle=document.defaultView.getComputedStyle(el, null);

var paddingLeft=computedStyle.getPropertyValue("padding-left");

var paddingRight=computedStyle.getPropertyValue("padding-right");

padding=parseInt(paddingLeft.substr(0,paddingLeft.length-2))+parseInt(paddingRight.substr(0,paddingRight.length-2));

position=computedStyle.getPropertyValue("position");

float=computedStyle.getPropertyValue('float');

margin=computedStyle.getPropertyValue('margin');

left=computedStyle.getPropertyValue('left');

top=computedStyle.getPropertyValue('top');

right=computedStyle.getPropertyValue('right');

bottom=computedStyle.getPropertyValue('bottom');

}

if(position=='absolute'||position=='relative'){

container.style.position=position;

container.style.left=el.offsetLeft+'px';

container.style.top=el.offsetTop+'px';

container.style.bottom=bottom;

container.style.right=right;

container.style.left=left;

container.style.top=top;

}

el.style.left=el.style.top='0';

container.style.float=float;

container.style.margin=margin;

el.style.margin='0';

el.parentNode.insertBefore(container, el);

三. 因为使用了样式分离，所以支持任意自定义样式。

四. 组件的使用。

仅需一句代码 ScrollUI(el)//el 为要使用自定义滚动条的元素

原创文章转载请注明：

转载自AlloyTeam：http://www.alloyteam.com/2012/05/perfect-custom-scrollbar/

分享到:

vfv 2012 年 8 月 29 日

生活更美好，剩不少事，呵呵

回复
Michael 2012 年 8 月 28 日

如果这里这个滚动条能需要时显示，也许效果更好，不知道楼主觉得如何？

回复
alex 2012 年 7 月 27 日

firefox 滚动条没有效果。

回复
dgunzi 2012 年 6 月 15 日

可惜完全不支持 ipad！

回复
袁源 2012 年 6 月 14 日

决定收藏，下次试试看……

回复
vls 2012 年 5 月 31 日

既然是前端团队的 Blog，这代码高亮实在可以改进，现在字体过小，不是等宽字体……

回复
XDTEST 2012 年 5 月 16 日

发现那个 SELECT UI 很不错，但是在使用的时候有点问题
在表单中使用的时候
程序中 document.onclick 中返回的 false，会导致表单无法 submit（非 AJAX 方式提交）
1. 考虑到实际使用，建议增加默认选中值。不能以第一个元素作为初始化的值
2. 现在的方式对于 submit 不便，可以创建一个 input 隐藏域，然后通过函数传递所需的 name 或者 hidden 字段
选择选项后，修改隐藏域的值

上面的我都修改过了，用起来不错，哈哈。。。

回复
- yitian_web 2012 年 8 月 15 日
  
  哥,firefox 好像不怎兼容? —-自定义滚动条
  
  回复

AlloyTeam

AlloyTeam

首先关于鼠标长按事件，使用 setInterval 的方式

第二，关于如何做到使用该组件无需改动任何代码。

三. 因为使用了样式分离，所以支持任意自定义样式。

四. 组件的使用。

vfv 2012 年 8 月 29 日

Michael 2012 年 8 月 28 日

alex 2012 年 7 月 27 日

dgunzi 2012 年 6 月 15 日

袁源 2012 年 6 月 14 日

vls 2012 年 5 月 31 日

XDTEST 2012 年 5 月 16 日

yitian_web 2012 年 8 月 15 日

发表评论