水平滚动条和垂直滚动条设置

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.让浏览器窗口永远都不出现滚动条
没有水平滚动条
<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>

水平滚动条和垂直滚动条设置相关推荐

textarea滚动条CSS样式属性设置
<textarea>滚动条属性CSS样式设置,包括textarea溢出横竖滚动条设置.隐藏滚动条.滚动条颜色.水平滚动条.垂直滚动条设置等. textarea滚动条CSS样式 textar ...
去掉iframe的水平滚动条而保留垂直滚动条
如果untitled3.html页中文字超过一屏的话,就会出现了垂直滚动条,在IE7.FF下都是不出现水平滚动条,但在IE6下会出现．在网上找了两种方法如下: 在<boby>里加入scr ...
jqGrid 如何shrinkToFit出现水平滚动条及页面有垂直滚动条时表格会超出父容器处理
1.下图右侧为表格超出panel部分页面html代码: <!DOCTYPE html> <html> <head><meta charset="U ...
解决boostrap-table有水平和垂直滚动条时，滚动条滑到最右边表格标题和内容单元格无法对齐的问题
解决boostrap-table有水平和垂直滚动条时,滚动条滑到最右边表格标题和内容单元格无法对齐的问题参考文章: (1)解决boostrap-table有水平和垂直滚动条时,滚动条滑到最右边表格标 ...
easyui datagrid 表头固定（垂直滚动条）、列固定（水平滚动条）
easyui datagrid 表头固定(垂直滚动条).列固定(水平滚动条),每页显示1000行最近用多了easyui 之后还是觉得它的功能还是很强大的.它原有的功能就已经能够满足90%以上的界面需 ...
android 垂直自动滚动条,Android实现Activity水平和垂直滚动条的方法
本文实例讲述了Android实现Activity水平和垂直滚动条的方法.分享给大家供大家参考,具体如下: android:layout_width="match_parent" a ...
html如何设置滚动条居中,css3内容垂直居中及垂直滚动条例子
垂直居中用得不少了,我在学习css3中也就碰到过了,在此小编就来为各位介绍css3内容垂直居中及垂直滚动条例子,希望文章对各位有帮助. 内容垂直集中相对于内容在水平位置,内容在垂直方向是不好把控的, ...
设计一个Windows窗体程序，设置程序，其运行结果如下图所示。垂直滚动条控制字体大小。
设计一个Windows窗体程序,设置程序,其运行结果如下图所示.一个标签控件的Text属性为"缩放"两个字,它的字体大小取决于垂直滚动条的值(Maximum=72,Minimum= ...
html5实现纵向滚动,【前端】如何让水平滚动区域的垂直滚动条固定在滚动区域的右边？...
1.问题描述题目可能一下子看不懂,下面这张图是我想实现的效果: 外部div中有一个水平滚动条,内部div中有一个垂直滚动条但是我必须把水平滚动条拉到最右边,才能看到垂直滚动条.而我想把垂直滚动条固 ...

水平滚动条和垂直滚动条设置

水平滚动条和垂直滚动条设置相关推荐

最新文章

热门文章