介绍自定义滚动条样式的2种方法

最近做项目中有一个模块是用于实时监控的，左边有个菜单栏用于显示所有的设备，那当然是从数据库中动态获取的了，右边是个iframe用于显示监控画面。本来这个功能并不复杂，左边的菜单项是利用dtree.js来实现的，可时当功能实现完成之后，却发现一个问题，就是左边菜单栏中的设备名有的会很长，会超出了div的长度，准确说是左边iframe的宽度和长度不够。那么，这时就必须要利用滚动条了，可以设置左边菜单项div的overflow-x:auto;overlfow-y:auto;这样就会自动生成了滚动条，但是大家都知道自带的不好看。接下来就是重点了，如何修改滚动条的样式呢？

经过从网上的不断搜索，发现有两种方法：

if($(_self).children(".jscroll-c").height()==null){ 
//添加内容框(div) 
$(_self).wrapInner("<div class='jscroll-c' style='top:0px;z-index:9999;zoom:1;position:relative;'></div>"); 
//添加竖向滚动条 
$(_self).append("<div
 class='jscroll-e' unselectable='on' 
style='height:97.5%;top:0px;right:0;-moz-user-select:none;position:absolute;overflow:hidden;z-index:10000;'><div
 class='jscroll-u' 
style='position:absolute;top:0px;width:100%;right:0;background:blue;overflow:hidden'></div><div
 class='jscroll-h' unselectable='on' 
style='background:green;position:absolute;left:0;-moz-user-select:none;border:1px
 solid'></div><div class='jscroll-d' 
style='position:absolute;bottom:0px;width:100%;left:0;background:blue;overflow:hidden'></div></div>"); 
//添加横向滚动条 
$(_self).append("<div class='jscroll-s' 
unselectable='on' 
style='width:180px;bottom:0px;left:0;-moz-user-select:none;position:absolute;overflow:hidden;z-index:10000;'><div
 class='jscroll-l' 
style='position:absolute;bottom:0px;height:100%;left:0;background:blue;overflow:hidden'></div><div
 class='jscroll-g' unselectable='on' 
style='height:100%;background:green;position:absolute;left:0;-moz-user-select:none;border:1px
 solid'></div><div class='jscroll-r' 
style='position:absolute;bottom:0px;height:100%;right:0;background:blue;overflow:hidden'></div></div>"); 
}

然后无非就是一些判断，div的内容是否超过了div的范围，监听事件的添加。