html滚动条(html滚动条样式)

html滚动条

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.让浏览器窗口永远都不呈现滚动条
没有水平滚动条
代码如下:
没有笔直滚动条
代码如下:
没有滚动条
代码如下:
或
2.设定多行文本框的滚动条
没有水平滚动条
代码如下:
</textarea>
没有笔直滚动条
代码如下:
<textareastyle=”overflow-y:hidden”></textarea>
没有滚动条
代码如下:
</textarea>
或<textareastyle=”overflow:hidden”></textarea>
3.设定窗口滚动条的色彩
设置窗口滚动条的色彩为赤色
scrollbar-base-color设定的是根本色，一般情况下只需要设置这一个特点就可以达到改变滚动条色彩的目的。
加上一点特别的效果：
代码如下:
4.在款式表文件中界说好一个类，调用款式表
代码如下:
这样调用：
代码如下:
</textarea>
textarea色彩及边框设置：
代码如下:
</textarea>
html滚动条样式
我使用的
<style>
.innerbox{
overflow-y:auto;
background-color:#f8f8f8;
height:200px;
padding:10px;
}
.innerbox::-webkit-scrollbar{/*滚动条整体样式*/
width:4px;/*高宽分别对应横竖滚动条的尺寸*/
height:4px;
scrollbar-arrow-color:red;
}
.innerbox::-webkit-scrollbar-thumb{/*滚动条里面小方块*/
border-radius:5px;
-webkit-box-shadow:inset005pxrgba(0,0,0,0.2);
background:rgba(0,0,0,0.2);
scrollbar-arrow-color:red;
}
.innerbox::-webkit-scrollbar-track{/*滚动条里面轨道*/
-webkit-box-shadow:inset005pxrgba(0,0,0,0.2);
border-radius:0;
background:rgba(0,0,0,0.1);
}
</style>