关于HTML中的滚动条使用技巧分享

2019-01-15 13:05:23于丽

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。
left:对象相对于页面的X坐标。
top:对象相对于页面的Y坐标
(5)屏蔽选择,右键等
<body oncontextmenu=self.event.returnValue=falseonselectstart="return false">
下面的这个小例子是 实现滚动条根据窗体的大小自动设置

复制代码

<SPAN style="FONT-SIZE: 18px"><html>
<head>
<style type="text/css">
&nbsp; .TopDIV
&nbsp; {&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp; position:absolute;
&nbsp;&nbsp;&nbsp;&nbsp; left:130px;
&nbsp;&nbsp;&nbsp;&nbsp; top:10px;
&nbsp;&nbsp;&nbsp;&nbsp; width:105;
&nbsp;&nbsp;&nbsp;&nbsp; height:30;
&nbsp;&nbsp;&nbsp;&nbsp; overflow-x:hidden;
&nbsp;&nbsp;&nbsp;&nbsp; overflow-y:auto;
&nbsp;&nbsp;&nbsp;&nbsp; float: right;
&nbsp;&nbsp;&nbsp;&nbsp; border-style.:solid;
&nbsp;&nbsp;&nbsp;&nbsp; border-width:;
&nbsp;&nbsp;&nbsp;&nbsp; border-color:red
&nbsp; }
&nbsp; .LeftDIV
&nbsp; {&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp; position:absolute;
&nbsp;&nbsp;&nbsp;&nbsp; left:10px;
&nbsp;&nbsp;&nbsp;&nbsp; top:40px;
&nbsp;&nbsp;&nbsp;&nbsp; width:120;
&nbsp;&nbsp;&nbsp;&nbsp; height:60;
&nbsp;&nbsp;&nbsp;&nbsp; overflow-x:hidden;
&nbsp;&nbsp;&nbsp;&nbsp; overflow-y:hidden;
&nbsp;&nbsp;&nbsp;&nbsp; float: right;
&nbsp;&nbsp;&nbsp;&nbsp; border-style.:solid;
&nbsp;&nbsp;&nbsp;&nbsp; border-width:;
&nbsp;&nbsp;&nbsp;&nbsp; border-color:yellow
&nbsp; }
&nbsp; .MainDIV
&nbsp; {&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp; position:absolute;
&nbsp;&nbsp;&nbsp;&nbsp; left:130px;
&nbsp;&nbsp;&nbsp;&nbsp; top:40px;
&nbsp;&nbsp;&nbsp;&nbsp; width:120;;
&nbsp;&nbsp;&nbsp;&nbsp; height:80;
&nbsp;&nbsp;&nbsp;&nbsp; overflow-x:auto;
&nbsp;&nbsp;&nbsp;&nbsp; overflow-y:auto;
&nbsp;&nbsp;&nbsp;&nbsp; float: right;
&nbsp;&nbsp;&nbsp;&nbsp; border-style.:solid;
&nbsp;&nbsp;&nbsp;&nbsp; border-width:;
&nbsp;&nbsp;&nbsp;&nbsp; border-color:blue
&nbsp; }
</style>
<script type="text/javascript" language="javascript">
function setStyle()
{
//145的由来LeftDiv的left+width+15(15是滚动条的宽度)
document.getElementById("a").style.width=document.body.clientWidth - 145;
//130的由来LeftDiv的left+width
document.getElementById("c").style.width=document.body.clientWidth - 130;
//55的由来TopDIV的top+height+15(15是滚动条的宽度)
document.getElementById("b").style.height=document.body.clientHeight - 55;
//40的由来TopDIV的top+height
document.getElementById("c").style.height=document.body.clientHeight - 40;
}
</script>
&nbsp;
</head>
<body onresize="setStyle();" onLoad="setStyle();">
&nbsp;
<div id='a' class="TopDIV">
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
</div>
&nbsp;
<div id='b' class="LeftDIV">
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
3234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
4234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
5234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
6234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
7234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
8234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
9234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
0234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
</div>
<div id='c' onscroll="document.getElementById('b').scrollTop = this.scrollTop;document.getElementById('a').scrollLeft = this.scrollLeft;"
&nbsp;class="MainDIV">
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
3234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
4234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
5234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
6234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
7234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
8234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
9234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
0234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
</div>
</body>
</html>
</SPAN>