设置滚动条属性div|textarea

75 阅读 0 评论 50 点赞

我是靠谱客的博主从容香烟，最近开发中收集的这篇文章主要介绍设置滚动条属性div|textarea，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

上下/左右滚动条都有
<div style="overflow:scroll;height:77;width:300">123</div>

只产生左右滚动条

只产生上下滚动条

下拉滚动条(带颜色的)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

看有这两行没,W3C XHTML兼容代码,去掉那行代码就可以了. 都删除掉就可以了

<head>
<STYLE>

</STYLE>
</head>
<body>
<style type="text/css">
div {
    width:100px;
    height:100px;
    overflow-y:auto;
    overflow-x:hidden;
}
</style>

</body>

<textarea cols=30 name=RedF9 rows=3 style="BORDER-BOTTOM: #006600 1px

dotted; BORDER-LEFT: #006600 1px dotted; BORDER-RIGHT: #006600 1px

dotted; BORDER-TOP: #006600 1px dotted" wrap=VIRTUAL></textarea>

没有水平滚动条：

<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>

overflow :用法设置滚动条属性

语法：

overflow : visible | auto | hidden | scroll

参数：

visible : 　不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效
auto : 　此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
hidden : 　不显示超过对象尺寸的内容
scroll : 　总是显示滚动条

说明：

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
设置textarea对象为hidden值将隐藏其滚动条。
对于table来说，假如table-layout属性设置为fixed，则td对象支持带有默认值为hidden的overflow属性。如果设为hidden，scroll或者auto，那么超出td尺寸的内容将被剪切。如果设为visible，将导致额外的文本溢出到右边或左边（视direction属性设置而定）的单元格。
自IE5开始，此属性在MAC平台上可用。
对应的脚本特性为overflow。请参阅我编写的其他书目。

示例：

body { overflow: hidden; }
div { overflow: scroll; height: 100px; width: 100px; }

转载于:https://www.cnblogs.com/nianshi/archive/2009/04/21/1440428.html