脚本宝典收集整理的这篇文章主要介绍了js实例教程-利用div+jquery自定义滚动条样式的2种方法，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

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

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

第一种方法：利用CSS提供的样式，一共是8种属性吧，在这里不做详细介绍，网上很多这方面的资料。

第二种方法：自己写一个新的滚动条，即不用p自带的滚动条。这样想要什么样的效果就有什么样的效果。具体实现，在网上搜了很多，可以发现基本上只有竖向滚动条，而没有横向滚动条，无奈之下，自己利用jquery写另一个滚动条，当然也借鉴了只有竖向滚动条的程序。

说一下具体实现思路：目标p 即需要生成滚动条的p，里面嵌套了3个p，分别是用于显示内容的p_content，显示竖向滚动条的p_H,显示横向滚动条的p_W,具体布局就是按照自带滚动条的p的布局一样，然后显示滚动条的p即p_H和p_W有各自包含了3个p，即左右箭头2个，滚动条1个。具体代码如下：

. 代码如下:

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

然后无非就是一些判断，p的内容是否超过了p的范围，监听事件的添加。具体代码可见我的下载资源；

觉得可用，就经常来吧！Javascript技巧 脚本宝典 欢迎评论哦！&nbsp;js技巧，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的js实例教程-利用div+jquery自定义滚动条样式的2种方法全部内容，希望文章能够帮你解决js实例教程-利用div+jquery自定义滚动条样式的2种方法所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。