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

2020-04-17 08:12:08易采站长站整理

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;