cari

Rumah  >  Artikel  >  hujung hadapan web  >  CSS：scrollbar的属性知识及样式分类介绍

CSS：scrollbar的属性知识及样式分类介绍

黄舟
黄舟asal
2017-07-03 11:11:002085semak imbas

scrollbar在CSS里也是很常用的一个代码.我们把它介绍一下 1．overflow内容溢出时的设置（设定被设定对象是否显示滚动条）
overflow-x水平方向内容溢出时的设置
overflow-y垂直方向内容溢出时的设置
以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。
2．scrollbar-3d-light-color立体滚动条亮边的颜色（设置滚动条的颜色）
scrollbar-arrow-color上下按钮上三角箭头的颜色
scrollbar-base-color滚动条的基本颜色
scrollbar-dark-shadow-color立体滚动条强阴影的颜色
scrollbar-face-color立体滚动条凸出部分的颜色
scrollbar-highlight-color滚动条空白部分的颜色
scrollbar-shadow-color立体滚动条阴影的颜色 86oo精彩教程
我们通过几个实例来讲解上述的样式属性：
1.让浏览器窗口永远都不出现滚动条
没有水平滚动条 

<body style="overflow-x:hidden">


没有垂直滚动条 

<body style="overflow-y:hidden">


没有滚动条 

<body style="overflow-x:hidden;overflow-y:hidden">

或

<body 
style="overflow:hidden"> http://www.o.com

2.设定多行文本框的滚动条
没有水平滚动条 

<textarea style="overflow-x:hidden"></textarea>

没有垂直滚动条 

<textarea style="overflow-y:hidden"></textarea>

没有滚动条 

<textarea style="overflow-x:hidden;overflow-y:hidden"></textarea>

或

<textarea style="overflow:hidden"></textarea>

3.设定窗口滚动条的颜色
设置窗口滚动条的颜色为红色1b41a1bfa75c9f58e5e22b36f1848fc4
scrollbar-base-color设定的是基本色，一般情况下只需要设置这一个属性就可以达到改变滚动条颜色的目的。
加上一点特别的效果： 

<body style="scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon">


4.在样式表文件中定义好一个类，调用样式表。 

<style> 
.coolscrollbar{scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon;} 
</style>

这样调用： 

<textarea class="coolscrollbar"></textarea> 
Scrollbar-Face-Color为滚动条表面颜色设定； 
Scrollbar-Highlight-Color为滚动条上斜面和左斜面颜色设定； 
Scrollbar-Shadow-Color为滚动条下斜面和右斜面颜色设定； 
Scrollbar-3Dlight-Color为滚动条上边和左边的边沿颜色设定； 
Scrollbar-Arrow-Color为滚动条两端箭头颜色设定。 
Scrollbar-Track-Color为滚动条底板颜色设定； 
Scrollbar-Darkshadow为滚动条下边和右边边沿颜色设定。

举例： 

body { 
background-color
: #ffffff; 
color: #336699; 
SCROLLBAR-FACE-COLOR: #BED8EB; 
SCROLLBAR-SHADOW-COLOR: #DDF8FF; 
SCROLLBAR-HIGHLIGHT-COLOR: #92C0D1; 
SCROLLBAR-3DLIGHT-COLOR: #DDF8FF; 
SCROLLBAR-DARKSHADOW-COLOR: #92C0D1; 
SCROLLBAR-TRACK-COLOR:#BED8EB; 
SCROLLBAR-ARROW-COLOR: #92C0D1 
}


Atas ialah kandungan terperinci CSS：scrollbar的属性知识及样式分类介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：css中scrollbar-shadow-color的详解Artikel seterusnya：使用CSS调整scrollbar(滚动条)的配色详解

Artikel berkaitan

Lihat lagi