利用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 相关文章推荐
jQuery使用手册之二 DOM操作
Mar 24 Javascript
jquery的clone方法应用于textarea和select的bug修复
Jun 26 Javascript
js星星评分效果
Jul 24 Javascript
JSONP原理及简单实现
Jun 08 Javascript
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
Oct 12 Javascript
vue数据操作之点击事件实现num加减功能示例
Jan 19 Javascript
通过JS运行机制的角度说说作用域
Mar 12 Javascript
vue swipe自定义组件实现轮播效果
Jul 03 Javascript
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
May 21 Javascript
jQuery实现简单评论功能
Aug 19 jQuery
JS运算符优先级与表达式示例详解
Sep 04 Javascript
jQuery实现放大镜案例
Oct 19 jQuery
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 shell命令合并图片的代码
2011/06/23 PHP
Laravel中间件实现原理详解
2016/10/09 PHP
Yii2中使用asset压缩js,css文件的方法
2016/11/24 PHP
PHP 使用二进制保存用户状态的实例
2018/01/29 PHP
JScript中的undefined和&quot;undefined&quot;的区别
2007/03/08 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
2013/10/11 Javascript
jQuery表格插件datatables用法详解
2020/11/23 Javascript
使用Javascript实现选择下拉菜单互移并排序
2016/02/23 Javascript
Node.js的Web模板引擎ejs的入门使用教程
2016/06/06 Javascript
vue中如何实现变量和字符串拼接
2017/06/19 Javascript
详解微信小程序中的页面代码中的模板的封装
2017/10/12 Javascript
浅谈NodeJs之数据库异常处理
2017/10/25 NodeJs
nginx配置React静态页面的方法教程
2017/11/03 Javascript
JS+canvas画一个圆锥实例代码
2017/12/13 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
2018/06/23 Javascript
jquery实现选项卡切换代码实例
2019/05/14 jQuery
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
2020/04/28 Javascript
Django CSRF跨站请求伪造防护过程解析
2019/07/31 Python
Python @property原理解析和用法实例
2020/02/11 Python
使用python图形模块turtle库绘制樱花、玫瑰、圣诞树代码实例
2020/03/16 Python
Python字典取键、值对的方法步骤
2020/09/30 Python
Anaconda详细安装步骤图文教程
2020/11/12 Python
利用css3如何设置没有上下边的列表间隔线
2017/07/03 HTML / CSS
中粮集团旗下食品网上购物网站:我买网
2016/09/22 全球购物
澳大利亚潮流尖端的快时尚品牌:Cotton On
2016/09/26 全球购物
德国EGOIST网店:销售畅销的设计师品牌
2017/04/18 全球购物
什么情况下你必须要把一个类定义为abstract的
2013/01/06 面试题
学习党章思想汇报
2014/01/07 职场文书
全国道德模范事迹
2014/02/01 职场文书
阿德的梦教学反思
2014/02/06 职场文书
2014年医务科工作总结
2014/12/18 职场文书
医生个人年度总结
2015/02/28 职场文书
幼儿园大班开学寄语(2015秋季)
2015/05/27 职场文书
Javascript之datagrid查询详解
2021/09/15 Javascript
SQL Server使用导出向导功能
2022/04/08 SQL Server
git stash(储藏)的用法总结
2022/06/25 Servers