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("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'/divdiv
class='jscroll-h'
unselectable='on'
style='background:green;position:absolute;left:0;-moz-user-select:none;border:1px
solid'/divdiv
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'/divdiv
class='jscroll-g'
unselectable='on'
style='height:100%;background:green;position:absolute;left:0;-moz-user-select:none;border:1px
solid'/divdiv
class='jscroll-r'
style='position:absolute;bottom:0px;height:100%;right:0;background:blue;overflow:hidden'/div/div");
}
然后无非就是一些判断，div的内容是否超过了div的范围，监听事件的添加。具体代码可见我的下载资源；
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
}
div添加滚动条
div 加滚动条的方法：
div style="position:absolute; height:400px; overflow:auto"/div
div 设置滚动条显示：overflow :yes
div 设置滚动条自适应显示：overflow :auto
div 设置上下滚动条显示：overflow-y :yes
div 设置上下滚动条自适应显示：overflow-y :auto
如果该div被包含在其他对象例如td中，则位置可设为相对：position:relative
css3如何 设置一个div出现滚动条，并设置 样式？
div style="width:400px; height:300px; border:1px solid #888; overflow:scroll"这个DIV有滚动条/div
怎么给div加滚动条
1、div style="height:300px;width:100px;overflow:auto"div/（height和width根据需求设定）
注意:如果只写height就只有垂直滚动条，只写width就只有水平滚动条,都不写没有效果。还有这里overflow设置为auto,也就说是如果你的页面高度大于300px就会出现滚动条，小于300px就没有滚动条。同理，如果宽度大于100px出现滚动条，小于就没有。
2、你也可以将overflow设置为scroll，即:div style="height:300px;width:100px;overflow:scroll"div/。这样设定的效果为
不管你的页面高度大于还是小于300px,都会出现滚动条，宽度同理。
3、也可以这样设置
水平滚动条：div style="width:100px;overflow-x:auto"/div
垂直滚动条：div style="height:300px;overflow-y:auto"/div
水平加垂直：div style="width:100px;height:300px;overflow-x:auto;overflow-y:auto"/div
扩展资料
div 可定义文档中的分区或节（division/section）。
div 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
如果用 id 或 class 来标记 div，那么该标签的作用会变得更加有效。
注释：div 是一个块级元素，也就是说，浏览器通常会在 div 元素前后放置一个换行符。
提示：请使用 div 元素来组合块级元素，这样就可以使用样式对它们进行格式化。
参考资料：百度百科 div