HTML滚动条样式代码与使用技巧.pdfVIP

HTML滚动条样式代码及使⽤技巧 在html ⽹页中，我们都知道⼤篇幅的长⽂章会占据⽹页的⼤部分空间，影响了整体⽹ 站页⾯的 观性和阅读体验，因此，在html ⽹页中添加⼀个带有滚动条的⽂本框，就 可以很好地解决上述问题。⽹页滚动条本⾝就是浏览器的⼀部分，使⽤它可以⽅便浏 览较⼤的⽹页，下⾯就是相关语法： DIV align=center style= color: #ffffff; background-color: #000000; border: solid 2p black; width: 120p ; height: 200p ; overflow : scroll; scrollbar-face-color: #889B9F; scrollbar-shadow-color: #3D5054; scrollbar-highlight-color: #C3D6DA; scrollbar-3dlight-color: #3D5054; scrollbar-darkshadow-color: #85989C; scrollbar-track-color: #95A6AA; scrollbar-arrow-color: #FFD6DA; ⽇志⽂字/DIV 上述语法⽣成⼀个带有⿊⾊背景及灰蓝⾊边框的⽂本滚动框。语法⾥的参数相当简 单，主要是控制不同部分的⾊彩，你可以做相应变化并在预览中观看实际效果。⾄于 调整⽂本框的⼤⼩，你可以在插⼊此语法后退出HTML编辑模式，然后在⽇志编辑页 ⾯使⽤⿏标直接进⾏调整。 html中滚动条属性设置 scrollbar属性、样式详解 1、overflow 内容溢出时的设置 （设定被设定对象是否显⽰滚动条） overflow-x⽔平⽅向内容溢出时的设置 overflow-y垂直⽅向内容溢出时的设置 以上三个属性设置的值为visible(默认值)、scroll、hidden 、auto 。 2、 scrollbar-3d-li ht-color⽴体滚动条亮边的颜⾊ （设置滚动条的颜⾊） scrollbar-arrow-color上下按钮上三⾓箭头的颜⾊ scrollbar-base-color滚动条的基本颜⾊ scrollbar-dark-shadow-color⽴体滚动条强阴影的颜⾊ scrollbar-face-color⽴体滚动条凸出部分的颜⾊ scrollbar-hi hli ht-color滚动条空⽩部分的颜⾊ scrollbar-shadow-color⽴体滚动条阴影的颜⾊ 我们通过⼏个实例来讲解上述的样式属性： 1.让浏览器窗⼜永远都不出现滚动条 没有⽔平滚动条 body style=overflow-x:hidden 没有垂直滚动条 body style=overflow-y:hidden 没有滚动条 body style=overflow-x:hidden;overflow-y:hidden或body style=overflow:hidden 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.设定窗⼜滚动条的颜⾊ 设置窗⼜滚动条的颜⾊为红⾊body style=scrollbar-base-color:red scrollbar-base-color设定的是基本⾊，⼀般情况下只需要设置这⼀个属性就可以达到改 变滚动条颜⾊的⽬的。 加上⼀点特别的效果： body style=scrollbar-arrow-color:yellow;scrollbar-base-color:li htsalmon 4 .在样式表⽂件中定义好⼀个类，调⽤样式表。 style .coolscrollbar{scrollbar-arrow-color:yellow;scrollbar-base-color:li htsalmon;} /style 这样调⽤： textarea class=coolscrollbar