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

本文目录

• 利用div+jquery自定义滚动条样式的2种方法
• 用css怎么设置div滚动条的样式，可改变大小的
• 怎样用jquery改变DIV的滚动条的样式
• css设置div滚动条样式

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

可以设置左边菜单项div的overflow-x:auto;overlfow-y:auto;这样就会自动生成了滚动条，但是大家都知道自带的不好看。接下来就是重点了，如何修改滚动条的样式呢？感兴趣的朋友可以了解下本文 最近做项目中有一个模块是用于实时监控的，左边有个菜单栏用于显示所有的设备，那当然是从数据库中动态获取的了，右边是个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("《divclass=’jscroll-c’style=’top:0px;z-index:9999;zoom:1;position:relative;’》《/div》");//添加竖向滚动条$(_self).append("《divclass=’jscroll-e’unselectable=’on’style=’height:97.5%;top:0px;right:0;-moz-user-select:none;position:absolute;overflow:hidden;z-index:10000;’》《divclass=’jscroll-u’style=’position:absolute;top:0px;width:100%;right:0;background:blue;overflow:hidden’》《/div》《divclass=’jscroll-h’unselectable=’on’style=’background:green;position:absolute;left:0;-moz-user-select:none;border:1pxsolid’》《/div》《divclass=’jscroll-d’style=’position:absolute;bottom:0px;width:100%;left:0;background:blue;overflow:hidden’》《/div》《/div》");//添加横向滚动条$(_self).append("《divclass=’jscroll-s’unselectable=’on’style=’width:180px;bottom:0px;left:0;-moz-user-select:none;position:absolute;overflow:hidden;z-index:10000;’》《divclass=’jscroll-l’style=’position:absolute;bottom:0px;height:100%;left:0;background:blue;overflow:hidden’》《/div》《divclass=’jscroll-g’unselectable=’on’style=’height:100%;background:green;position:absolute;left:0;-moz-user-select:none;border:1pxsolid’》《/div》《divclass=’jscroll-r’style=’position:absolute;bottom:0px;height:100%;right:0;background:blue;overflow:hidden’》《/div》《/div》");}然后无非就是一些判断，div的内容是否超过了div的范围，监听事件的添加。具体代码可见我的下载资源；

用css怎么设置div滚动条的样式，可改变大小的

div {    scrollbar-arrow-color: #000000; /*三角箭头的颜色*/    scrollbar-face-color: #666666; /*立体滚动条的颜色*/    scrollbar-3dlight-color: #cccccc; /*立体滚动条亮边的颜色*/    scrollbar-highlight-color: #999999; /*滚动条空白部分的颜色*/    scrollbar-shadow-color: #333333; /*立体滚动条阴影的颜色*/    scrollbar-darkshadow-color: #222222; /*立体滚动条强阴影的颜色*/    scrollbar-track-color: #666; /*立体滚动条背景颜色*/    scrollbar-base-color:#f8f8f8; /*滚动条的基本颜色*/}

这是浏览器默认支持的属性，如果你要可以定制大小的，那要写 JS 脚本来控制

怎样用jquery改变DIV的滚动条的样式

　　你好，可以使用css编写div滚动条样式，当然也可以用$("div").addClass();添加指定样式

　　div样式属性　　face-color：滑块颜色　　hightlight-color：高亮颜色     3dlight-color：三维光线颜色 　　darkshadow-color：暗影颜色 　　shadow-color：阴影颜色     arrow-color：箭头颜色 t　　rack-color：滑道颜色     base-color：DIV滚动条的主要颜色，其中包含滚动按钮和滚动滑块 　　visible却省值，没有DIV滚动条，根据内容自动扩撑区域的大小，即定义的区域无效　　scroll总是显示滚动条     hidden没有滚动条，超出区域的内容不可见 　　auto根据内容自动判断是否添加滚动条 　　　　希望可以帮助到你

css设置div滚动条样式

目前只有chrome支持设置滚动条样式，给div设置伪类

• ::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的

• ::-webkit-scrollbar-button 滚动条两端的按钮

• ::-webkit-scrollbar-track  外层轨道

• ::-webkit-scrollbar-track-piece  内层滚动槽

• ::-webkit-scrollbar-thumb 滚动的滑块

• ::-webkit-scrollbar-corner 边角

• ::-webkit-resizer 定义右下角拖动块的样式

如div::-webkit-scrollbar{

    width:4px

}