利用div+jquery自定义滚动条样式的2种方法


Posted in Javascript onJuly 18, 2013

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

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

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

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

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

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的范围,监听事件的添加。具体代码可见我的下载资源;
Javascript 相关文章推荐
JavaScript 编写匿名函数的几种方法
Feb 21 Javascript
JavaScript中的getMilliseconds()方法使用详解
Jun 10 Javascript
Node.js编程中客户端Session的使用详解
Jun 23 Javascript
Bootstrap字体图标无法正常显示的解决方法
Oct 08 Javascript
jQuery联动日历的实例解析
Dec 02 Javascript
详解js的事件处理函数和动态创建html标记方法
Dec 16 Javascript
JS完成画圆圈的小球
Mar 07 Javascript
全面解析Node.js 8 重要功能和修复
Jun 02 Javascript
基于JavaScript实现抽奖系统
Jan 16 Javascript
Node.js中package.json中库的版本号(~和^)
Apr 02 Javascript
vue+elementUI实现表单和图片上传及验证功能示例
May 14 Javascript
vue导入.md文件的步骤(markdown转HTML)
Dec 31 Vue.js
JavaScript实现复制功能各浏览器支持情况实测
Jul 18 #Javascript
GRID拖拽行的实例代码
Jul 18 #Javascript
去掉gridPanel表头全选框的小例子
Jul 18 #Javascript
gridpanel动态加载数据的实例代码
Jul 18 #Javascript
javaScript NameSpace 简单说明介绍
Jul 18 #Javascript
JS获取鼠标坐标的实例方法
Jul 18 #Javascript
非常好用的JsonToString 方法 简单实例
Jul 18 #Javascript
You might like
默默小谈PHP&amp;MYSQL分页原理及实现
2007/01/02 PHP
php实现的支持imagemagick及gd库两种处理的缩略图生成类
2014/09/23 PHP
PHP实现恶意DDOS攻击避免带宽占用问题方法
2015/05/27 PHP
PHP统计当前在线用户数实例讲解
2015/10/21 PHP
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
2009/04/07 Javascript
jQuery验证Checkbox是否选中的代码 推荐
2011/09/04 Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
2014/04/23 Javascript
jQuery学习笔记之jQuery构建函数的7种方法
2014/06/03 Javascript
JavaScript实现在数组中查找不同顺序排列的字符串
2014/09/26 Javascript
jQuery的观察者模式详解
2014/12/22 Javascript
jQuery常用数据处理方法小结
2015/02/20 Javascript
js实现HashTable(哈希表)的实例分析
2016/11/21 Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
2017/01/18 Javascript
JavaScript中splice与slice的区别
2017/05/09 Javascript
js中DOM事件绑定分析
2018/03/18 Javascript
详解小程序原生使用ES7 async/await语法
2018/08/06 Javascript
详解vuex之store拆分即多模块状态管理(modules)篇
2018/11/13 Javascript
小程序如何写动态标签的实现方法
2020/02/05 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
2020/03/16 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
2020/07/31 Javascript
javascript实现固定侧边栏
2021/02/09 Javascript
[48:12]Secret vs Optic Supermajor 胜者组 BO3 第三场 6.4
2018/06/05 DOTA
Python完全新手教程
2007/02/08 Python
python多线程操作实例
2014/11/21 Python
python检查字符串是否是正确ISBN的方法
2015/07/11 Python
Python保存MongoDB上的文件到本地的方法
2016/03/16 Python
python实现音乐下载的统计
2018/06/20 Python
Python爬虫PyQuery库基本用法入门教程
2018/08/04 Python
python读写csv文件实例代码
2019/07/05 Python
python多线程扫描端口(线程池)
2019/09/04 Python
python自动化测试无法启动谷歌浏览器问题
2019/10/10 Python
用CSS3实现背景渐变的方法
2015/07/14 HTML / CSS
详解html5 canvas 微信海报分享(个人爬坑)
2018/01/12 HTML / CSS
建筑工程自我鉴定
2013/10/18 职场文书
中英文自我评价语句
2013/12/20 职场文书
党员反邪教心得体会
2016/01/15 职场文书