HTML教程
首页 > 开发 > 前端开发 > HTML教程 > HTML滚动条样式

HTML滚动条样式

HTML通过使用CSS可以自定义滚动条的样式，以更好地匹配温我们的用户界面而设计。包括滚动条属性设置、颜色设置等等。HTML滚动条样式的自定义可以大大提升用户体验和网站的视觉吸引力。

一、HTML滚动条实例

网页滚动条本身就是浏览器的一部分，使用它可以方便浏览较大的网页，下面就是相关语法：

color: #ffffff;
background-color: #000000;
border: solid 2px black;
width: 120px;
height: 200px;
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;

上述语法生成一个带有黑色背景及灰蓝色边框的文本滚动框。语法里的参数主要是控制不同部分的色彩，可以做相应变化并在预览中观看实际效果。至于调整文本框的大小，可以在插入此语法后退出HTML编辑模式，然后在日志编辑页面使用鼠标直接进行调整。

二、HTML滚动条属性设置

接下来对​scrollbar​属性和样式进行详细介绍。

  • overflow​内容溢出时的设置（设定被设定对象是否显示滚动条）；
  • ​overflow-x​水平方向内容溢出时的设置；
  • ​overflow-y​垂直方向内容溢出时的设置。

以上三个属性设置的值为​visible​(默认值)、​scroll​、​hidden​​、auto​。

  • scrollbar-3d-light-color​立体滚动条亮边的颜色（设置滚动条的颜色）；
  • scrollbar-arrow-color​上下按钮上三角箭头的颜色；
  • scrollbar-base-color​滚动条的基本颜色；
  • scrollbar-dark-shadow-color​立体滚动条强阴影的颜色；
  • ​scrollbar-face-color​立体滚动条凸出部分的颜色；
  • scrollbar-highlight-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: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​为滚动条下边和右边边沿颜色设定。

举例：

<textarea style="width:330px; overflow:scroll; overflow-x:hidden;"></textarea>

三、HTML滚动属性代码种类

<marquee>普通卷动</marquee> <br /> 
<marquee behavior=slide>滑动</marquee> <br /> 
<marquee behavior=alternate>来回卷动 </marquee><br /> 
<marquee direction=down>向下卷动</marquee> <br /> 
<marquee direction=up>向上卷动</marquee> <br /> 
<marquee direction=right>向右卷动</marquee> <br /> 
<marquee direction=left>向左卷动</marquee> <br /> 
<marquee loop=2>卷动次数</marquee> <br /> 
<marquee scrollamount=30>设定卷动距离</marquee> <br />

四、HTML滚动条颜色设置

scrollbar-arrow-color: color; ​/*三角箭头的颜色*/
​scrollbar-face-color: color;​ /*立体滚动条的颜色（包括箭头部分的背景色）*/
​scrollbar-3dlight-color: color; ​/*立体滚动条亮边的颜色*/
​scrollbar-highlight-color: color;​ /*滚动条的高亮颜色（左阴影？）*/
​scrollbar-shadow-color: color;​ /*立体滚动条阴影的颜色*/
​scrollbar-darkshadow-color: color;​ /*立体滚动条外阴影的颜色*/
​scrollbar-track-color: color; ​/*立体滚动条背景颜色*/
​scrollbar-base-color: color; ​/*滚动条的基色*/

​webkit​不再是用简单的几个CSS属性，而是CSS伪元素：

  • ​-webkit-scrollbar：​滚动条整体部分；
  • ​-webkit-scrollbar-button​：滚动条两端的按钮；
  • ​-webkit-scrollbar-track：​外层轨道；
  • ​-webkit-scrollbar-track-piece​：内层轨道，滚动条中间部分（除去）；
  • ​-webkit-scrollbar-thumb：（拖动条）；
  • ​-webkit-scrollbar-corner​：边角；
  • ​-webkit-resizer：​定义右下角拖动块的样式。

当然webkit提供的不止这些，还有很多伪类，可以更丰富滚动条样式：

  • ​:horizontal – horizontal​伪类应用于水平方向的滚动条；
  • ​:vertical – vertical​伪类应用于竖直方向的滚动条；
  • ​:decrement – decrement​伪类应用于按钮和内层轨道（track piece）。它用来指示按钮或者内层轨道是否会减小视窗的位置（比如，垂直滚动条的上面，水平滚动条的左边。）；
  • ​:increment – increment​伪类和​decrement​类似，用来指示按钮或内层轨道是否会增大视窗的位置（比如，垂直滚动条的下面和水平滚动条的右边。）；
  • ​:start – start​伪类也应用于按钮和滑块。它用来定义对象是否放到滑块的前面；
  • ​:end ​类似于start伪类，标识对象是否放到滑块的后面；
  • ​:double-button ​该伪类以用于按钮和内层轨道。用于判断一个按钮是不是放在滚动条同一端的一对按钮中的一个。对于内层轨道来说，它表示内层轨道是否紧靠一对按钮；
  • ​:single-button​ 类似于double-button伪类。对按钮来说，它用于判断一个按钮是否自己独立的在滚动条的一段。对内层轨道来说，它表示内层轨道是否紧靠一个single-button；
  • ​:no-button​ 用于内层轨道，表示内层轨道是否要滚动到滚动条的终端，比如，滚动条两端没有按钮的时候；
  • ​:corner-present ​ 用于所有滚动条轨道，指示滚动条圆角是否显示；
  • ​:window-inactive​ 用于所有的滚动条轨道，指示应用滚动条的某个页面容器（元素）是否当前被激活。（在webkit最近的版本中，该伪类也可以用于：：selection伪元素。webkit团队有计划扩展它并推动成为一个标准的伪类）。

另外，​:enabled​、​:disabled​、​:hover​ 和 ​:active​ 等伪类同样可以用于滚动条中。

五、HTML滚动条使用技巧

1、隐藏滚动条

<bodystyle="overflow-x:hidden;overflow-y:hidden">

2、如何在单元格或图层中出现滚动条

<divstyle="width:200px;height:200px;overflow-x:auto;overflow-y:auto;"></div>

3、javascript改变框架中滚动条的样式，比如改变颜色、改为平面效果等

<STYLE> 
BODY {SCROLLBAR-FACE-COLOR: #ffcc99;
SCROLLBAR-HIGHLIGHT-COLOR: #ff0000; 
SCROLLBAR-SHADOW-COLOR: #ffffff; 
SCROLLBAR-3DLIGHT-COLOR: #000000; 
SCROLLBAR-ARROW-COLOR: #ff0000; 
SCROLLBAR-TRACK-COLOR: #dee0ed; 
SCROLLBAR-DARKSHADOW-COLOR: #ffff00;} 
</STYLE>

说明：

  • ​scrollbar-3dlight-color:color​;设置或检索滚动条亮边框颜色；
  • ​scrollbar-highlight-color:color​;设置或检索滚动条3D界面的亮边颜色；
  • ​scrollbar-face-color:colo​r​;设置或检索滚动条3D表面的颜色；
  • ​scrollbar-arrow-color:color​;设置或检索滚动条方向箭头的颜色；当滚动条出现但不可用时，此属性失效；
  • ​scrollbar-shadow-color:color​;设置或检索滚动条3D界面的暗边颜色；
  • ​scrollbar-darkshadow-color:color​;设置或检索滚动条暗边框颜色；
  • ​scrollbar-base-color:color​;设置或检索滚动条基准颜色。其它界面颜色将据此自动调整；
  • ​scrollbar-track-color:color​;设置或检索滚动条的拖动区域颜色。

color为你要设置的颜色代码，可以是16进制的，比如#FF0000，可以是以RGB表示的，比如rgb(255,0,255)；设置滚动条样式的时候不必要把所有的属性都用上才会生效。

4、javascript 中的页面元素定位

  • ​clientX​、​clientY​是鼠标当前相对于网页的位置，当鼠标位于页面左上角时 clientX=0, clientY=0；
  • ​offsetX​、​offsetY​是鼠标当前相对于网页中的某一区域的位置，当鼠标位于页面中这一区域的左上角时 offsetX=0, offsetY=0；
  • ​screenX​、​screenY​是鼠标相对于用户整个屏幕的位置。x、y 是鼠标当前相对于当前浏览器的位置；
  • ​scrollLeft​：设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离（因为有滚动条的产生，所以目前页面可见内容是不定的）；
  • ​scrollTop​：设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离；
  • ​left​：对象相对于页面的X坐标；
  • ​top​：对象相对于页面的Y坐标。

5、屏蔽选择,右键等

<body oncontextmenu=self.event.returnValue=falseonselectstart="return false">
广告合作
QQ群号：707632017

温馨提示：

1、本网站发布的内容(图片、视频和文字)以原创、转载和分享网络内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。邮箱：2942802716#qq.com。（#改为@）

2、本站原创内容未经允许不得转裁，转载请注明出处“站长百科”和原文地址。

目录