设置滚动条样式,设置滚动条样式怎么设置

如何用css控制浏览器滚动条

用CSS控制滚动条样式

1,Overflow内容溢出时的设置

overflow 水平及垂直方向内容溢出时的设置

overflow-x 水平方向内容溢出时的设置

overflow-y 垂直方向内容溢出时的设置

以上三个属性设置的值为visible、scroll、hidden、auto

visible 默认值。使用该值时，无论设置的"width"和"height"的值是多少，其中的内容无论是否超出范围都将被强制显示。

hidden 效果与visible相反。任何超出"width"和"height"的内容都会不可见。

scroll 无论内容是否超越范围，都将显示滚动条。 auto 当内容超出范围时，显示滚动条，否则不显示。

应用:

没有水平滚动条:

div style="overflow-x:hidden"test/div

没有垂直滚动条 ：

div style="overflow-y:hidden"test/div

没有滚动条 ：

div style="overflow-x:hidden;overflow-y:hidden" 或

style="overflow:hidden"test/div

自动显示滚动条：

div style="height:100px;width:100px;overflow:auto;"test/div

2,自己定义滚动条的颜色

我们一般默认的滚动条样式如下左图,右图是放大了1600倍的样子,我们可以看到滚动条有几种言责组合的,我给他们标了7个号,分别注释在下面的css代码的后面了,注意css的注释代码是放在两个斜杠内的两个星号之间,如:/*这里放注释的代码*/

Body {

scrollbar-arrow-color: #f4ae21; /*图6,三角箭头的颜色*/

scrollbar-face-color: #333; /*图5,立体滚动条的颜色*/

scrollbar-3dlight-color: #666; /*图1,立体滚动条亮边的颜色*/

scrollbar-highlight-color: #666; /*图2,滚动条空白部分的颜色*/

scrollbar-shadow-color: #999; /*图3,立体滚动条阴影的颜色*/

scrollbar-darkshadow-color: #666; /*图4,立体滚动条强阴影的颜色*/

scrollbar-track-color: #666; /*图7,立体滚动条背景颜色*/

scrollbar-base-color:#f8f8f8; /*滚动条的基本颜色*/

Cursor:url(mouse.cur); /*自定义个性鼠标*/}

以上2项适用与body、div、textarea、iframe

怎样设置滚动“条”的宽，用css样式。 求高人指点！

多给点分

滚动条和div一样有自己的属性

height：10px;

====================

1、overflow-y : 设置当对象的内容超过其指定高度时如何管理内容；overflow-x : 设置当对象的内容超过其指定宽度时如何管理内容。

参数:

visible：扩大面积以显示所有内容

auto：仅当内容超出限定值时添加滚动条

hidden：总是隐藏滚动条

scroll：总是显示滚动条

2、height : 设置滚动条的高度（修改其后数值即可）。

3、滚动条颜色参数设置：

scrollbar-3d-light-color 设置或检索滚动条亮边框颜色

scrollbar-highlight-color 设置或检索滚动条3D界面的亮边（ThreedHighlight）颜色

scrollbar-face-color 设置或检索滚动条3D表面（ThreedFace）的颜色

scrollbar-arrow-color 设置或检索滚动条方向箭头的颜色

scrollbar-shadow-color 设置或检索滚动条3D界面的暗边（ThreedShadow）颜色

scrollbar-dark-shadow-color 设置或检索滚动条暗边框（ThreedDarkShadow）颜色

scrollbar-base-color 设置或检索滚动条基准颜色

利用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的范围，监听事件的添加。具体代码可见我的下载资源；

在网页中如何设置滚动条的宽度？

方法1:代码：html

{

overflow-y:

scroll;

}

原理：强制显示ie的垂直滚动条，而忽略水平滚动条优点：完全解决了这个问题,

允许你保持完整的XHTML

doctype.

缺点：即使页面不需要垂直滚动条的时候也会出现垂直滚动条。方法2:代码：html

{

overflow-x:

hidden;

overflow-y:

auto;

}

原理：隐藏横向滚动，垂直滚动根据内容自适应优点：在视觉上解决了这个问题.在不必要的时候,

未强制垂直滚动条出现.缺点：只是隐藏了水平滚动条，如果页面真正需要水平滚动条的时候，屏幕以外的内容会因为用户无法水平滚动，而看不到。方法3:代码：body

{

margin-right:

-15px;

margin-bottom:

-15px;

}

原理：这会在margin的水平和垂直方向上添加一个负值,

IE添加了该精确数值后,

便会去除对滚动条的需求假象.优点：在视觉上解决了这个问题.，垂直滚动根据内容自适应缺点：由于"人为创建"了15px的外边距(margin),

所以无法使用该填充过的屏幕区域.

Axure如何调整滚动条样式

打开Axure8，创建6个文件如下图所示，并根据图找到内联框架元件：

内嵌表格：

先在表格文件内编辑一个表格，5*5，x,y均为0， 0，宽高默认，随表填写上文字：

完成后开始编辑“内嵌表格”文件：拖动“内联框架”到工作区，宽高默认，框架滚动条：自动显示或隐藏：

根据图示找到：框架目标页面， 点击该链接，在弹出的窗体上找到“表格”文件名，双击：表格 文件名即可发现在 框架目标页面 后出现 表格 二字，设置完成。

F5预览，查看效果。

textarea滚动条样式

在测试scrollWidth、clientWidth、offsetWidth时需要让textarea可以出现水平滚动条，但是发现textarea默认会自动换行，不能直接出现水平滚动条，所以为了实现该效果，需要对textarea做一些处理，输入textarea wrap="off" style="overflow:scroll;"/textarea就可以设置滚动条了。

扩展资料：

常见功能

1、自动完成

自动完成的快捷键是Tab，如果在html文件中，输入cl按下tab，即可自动补全为class=””;加上zencoding后，更是如虎添翼，后面再讲到

2、多列编辑

按住ctrl点击鼠标，会出现多个闪烁的光标，这时可同时修改多处，或者按住鼠标中键拖拽。

3、代码注释功能

ctrl+/、ctrl+shift+/分别为行注释和块注释，再按一下就能去掉注释，ST2能够自动识别是html、css还是js文件，给出不同类型的注释。

4、行操作

ctrl+alt+↑、ctrl+alt+↓向上或者向下交换两行，ctrl+enter，光标后插入空行，ctrl+d选择相似，可以参考后面的快捷键列表。

参考资料来源：百度百科-Sublime