创新互联HTML教程：html中滚动条属性设置

在 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​属性、样式详解

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​立体滚动条阴影的颜色










我们通过几个实例来讲解上述的样式属性：

1.让浏览器窗口永远都不出现滚动条

没有水平滚动条





没有垂直滚动条





没有滚动条


或

style="overflow:hidden">

2.设定多行文本框的滚动条

没有水平滚动条

没有垂直滚动条

没有滚动条





或

3.设定窗口滚动条的颜色

设置窗口滚动条的颜色为红色


scrollbar-base-color设定的是基本色，一般情况下只需要设置这一个属性就可以达到改变滚动条颜色的目的。


加上一点特别的效果：

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

这样调用：

​Scrollbar-Face-Color​为滚动条表面颜色设定；


​Scrollbar-Highlight-Color​为滚动条上斜面和左斜面颜色设定；


​Scrollbar-Shadow-Color​为滚动条下斜面和右斜面颜色设定；


​Scrollbar-3Dlight-Color​为滚动条上边和左边的边沿颜色设定；


​Scrollbar-Arrow-Color​为滚动条两端箭头颜色设定。


​Scrollbar-Track-Color​为滚动条底板颜色设定；


​Scrollbar-Darkshadow​为滚动条下边和右边边沿颜色设定。

举例：

HTML各种滚动属性代码

普通卷动
   滑动  
  来回卷动
  向下卷动
  向上卷动
  向右卷动
  向左卷动
  卷动次数
   设定卷动距离
 

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)隐藏滚动条

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