scrollLeft,scrollTop,滚动代码的总结-Web前端之家

前几天和兄弟联手研究了一下横向和竖向图片滚动的代码,很提神,因为化解了多少个小意思首先个:for
{ document.getElementById.scrollTop++;
document.getElementById.scrollLeft++; }笔者刚开首的时候写成了for {
//document.getElementById.scrollTop++;
document.getElementById.scrollLeft++; }IE提醒错误,Exception
;小编半天不理解怎么回事,最终才察觉是犯了个超低档的荒诞,javascript中的变量用var定义,能够不定义!上面入正题clientHeight大家对
clientHeight
都还未有怎么争论,都觉着是内容可视区域的莫斯中国科学技术大学学,也便是说页面浏览器中能够见到内容的那几个区域的可观。

JS中offsetTop、clientTop、scrollTop、offsetTop各属性介绍

offsetHeightIE、Opera 认为 offsetHeight = clientHeight + 滚动条 +
边框。NS、FF 感到 offsetHeight 是网页内容实际中度,能够低于
clientHeight。

javascript中创建滚动代码的常用属性

scrollHeightIE、Opera 感觉 scrollHeight 是网页内容实际中度,能够低于
clientHeight。NS、FF 以为 scrollHeight 是网页内容中度,不过最小值是
clientHeight。

页可以看到区域宽:
document.body.clientWidth;

网页可以知道区域高:
document.body.clientHeight;
网页可以看到区域宽: document.body.offsetWidth   (包涵边线的宽卡塔尔(قطر‎;
网页可以知道区域高: document.body.offsetHeight (包蕴边线的宽卡塔尔国;
网页正文全文宽: document.body.scrollWidth;
网页正文全文高: document.body.scrollHeight;
网页被卷去的高: document.body.scrollTop;
网页被卷去的左: document.body.scrollLeft;
网页正文部分上: window.screenTop;
网页正文部分左: window.screenLeft;
显示屏分辨率的高: window.screen.height;
荧屏分辨率的宽: window.screen.width;
显示器可用职业区中度: window.screen.availHeight;

简轻松单地说clientHeight 正是经过浏览器看内容的这么些区域高度。NS、FF 以为offsetHeight 和 scrollHeight
都以网页内容中度,只不过当网页内容中度小于等于clientHeight
时,scrollHeight 的值是 clientHeight,而 offsetHeight 能够低于
clientHeight。IE、Opera 感到 offsetHeight 是可视区域 clientHeight
滚动条加边框。scrollHeight 则是网页内容实际中度。

 

同理clientWidth、offsetWidth 和 scrollWidth
的解说与地方相像,只是把高度换来宽度就可以。

 

那么当容器如div中的table的宽松与概念的div的宽的时候,那个时候ScrollLeft++是能够起功能的!

 

而这里的
document.getElementById.scrollTop++;是不可能起效果的!为何呢?因为他的器皿的高scrollHeight相当小于定义的
中的50px如若过量就足以起效果了,如

1、offsetLeft

本条时候,scrollleft和scrolltop都以能够起效率的,这里给大家一同指示要想用那多个东西就必得把实际的剧情弄得多于定义的器皿的width和height

假设 obj 为某个 HTML 控件。

上面给出横向移动的代码

obj.offsetTop 指 obj 间隔上方或上层控件之处,整型,单位像素。

在给出竖向运动的代码:

obj.offsetLeft 指 obj 间隔右侧或上层控件的岗位,整型,单位像素。

varspeed1=8

obj.offsetWidth 指 obj 控件本身的宽窄,整型,单位像素。

demo2.innerHTML=demo1.innerHTMLfunctionMarquees1(){if(demo2.offsetTop-demo.scrollTop<=0)demo.scrollTop-=demo1.offsetHeightelse{demo.scrollTop++

obj.offsetHeight 指 obj 控件自个儿的冲天,整型,单位像素。

}}varMyMars1=setIntervaldemo.onmouseover=function(){clearInterval}demo.onmouseout=function(){MyMars1=setInterval}

咱俩对近年来提到的“上方或上层”与“左方或上层”控件作个表明。

例如:

<div id=”tool”>

<input type=”button” value=”提交”>

<input type=”button” value=”重置”>

</div>

“提交”开关的 offsetTop
指“提交”开关距“tool”层下面框的离开,因为距其上边如今的是 “tool”
层的上边框。

“重新设置”开关的 offsetTop
指“重新初始化”按键距“tool”层下边框的相距,因为距其下边最近的是 “tool”
层的上边框。

“提交”开关的 offsetLeft
指“提交”按键距“tool”层左侧框的离开,因为距其左边手前段时间的是 “tool”
层的左侧框。

“重新初始化”按键的 offsetLeft
指“重新设置”按键距“提交”按键右侧框的偏离,因为距其左臂前段时间的是“提交”开关的左边手框。

上述属性在 FireFox 中也使得。

另 外:我们这里所说的是指 HTML 控件的属性值,并不是document.body,document.body
的值在不一致浏览器中有分化解释(实际上大多条件是出于对 document.body
解释分裂造成的,并不是由于对 offset
解释不一样产生的),点击这里查看分裂点。

标题:offsetTop 与 style.top 的区别

构思知识:offsetTop、offsetLeft、offsetWidth、offsetHeight

咱俩知道 offsetTop 可以得到 HTML 成分间隔上方或外层成分之处,style.top
也是足以的,二者的差别是:

一、offsetTop 重返的是数字,而 style.top
重返的是字符串,除了数字外还隐含单位:px。

二、offsetTop 只读,而 style.top 可读写。

三、若无给 HTML 成分钦点过 top 样式,则 style.top 再次来到的是空字符串。

offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与
style.height 也是同等道理。

标题:clientHeight、offsetHeight和scrollHeight

我们这边说说三种浏览器对 document.body 的 clientHeight、offsetHeight 和
scrollHeight 的演说,这里说的是 document.body,假诺是 HTML
控件,则又有不相同,点击这里查看。

这种种浏览器分别为IE(Internet
Explorer)、NS(Netscape)、Opera、FF(FireFox)。

2、clientHeight

clientHeight

我们对 clientHeight
都未曾怎么争议,皆感觉是内容可视区域的冲天,也等于说页面浏览器中得以看出内容的那些区域的高度,日常是最后二个工具条以下到状态栏以上的那个区域,与页面内容非亲非故。

offsetHeight

IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。

NS、FF 感觉 offsetHeight 是网页内容实际中度,可以低于 clientHeight。

scrollHeight

IE、Opera 认为 scrollHeight 是网页内容实际中度,能够低于 clientHeight。

NS、FF 以为 scrollHeight 是网页内容高度,不过最小值是 clientHeight。

简言之地说

clientHeight 正是经过浏览器看内容的这几个区域中度。

NS、 FF 感觉 offsetHeight 和 scrollHeight
都是网页内容高度,只不过当网页内容高度小于等于 clientHeight
时,scrollHeight 的值是 clientHeight,而 offsetHeight 能够低于
clientHeight。

IE、Opera 感觉 offsetHeight 是可视区域 clientHeight
滚动条加边框。scrollHeight 则是网页内容实际中度。

同理

clientWidth、offsetWidth 和 scrollWidth
的解释与地点同样,只是把中度换到宽度就能够。

但是

FF 在不相同的 DOCTYPE 中对 clientHeight 的解释不一样, xhtml 1 trasitional
中则不是如上分解的。其余浏览器则海市蜃楼那主题材料。

标题:scrollTop、scrollLeft、scrollWidth、scrollHeight

3、scrollLeft

scrollTop 是“卷”起来的万丈值,示例:

<div style=”width:100px;height:100px;overflow:hidden;” id=”p”>

<div style=”width:50px;height:300px;background-color:#0000FF;”
id=”t”>要是为 p 设置了
scrollTop,这么些内容大概不会完全呈现。</div>

</div>

<script type=”text/javascript”>

var p = document.getElementById(“p”);

p.scrollTop = 10;

</script>

鉴于为外层成分 p 设置了 scrollTop,所以内层成分会向上卷。

scrollLeft 也是相仿道理。

咱俩早已知道 offsetHeight 是作者因素的宽度。

而 scrollHeight 是里面因素的相对化宽度,包括此中因素的潜伏的片段。

上述中 p 的 scrollHeight 为 300,而 p 的 offsetHeight 为 100。

scrollWidth 也是近乎道理。

IE 和 FireFox 周全帮衬,而 Netscape 和 Opera 不扶持scrollTop、scrollLeft(document.body 除此之外)。

刊马上间:二〇〇六-10-15 20:20:16

标题:offsetTop、offsetLeft、offsetWidth、offsetHeight

4、clientLeft

归来对象的offsetLeft属性值和到近日窗口左侧的真实值之间的间距,能够知晓为边框的尺寸

直白以来对offsetLeft,offsetTop,scrollLeft,scrollTop那几个措施很迷糊,花了一天的时光好好的就学了一下.吸收了以下的结果:

1.offsetTop     :

日前指标到其顶头上司层顶上部分的间距.

不能够对其进展赋值.设置对象到页面最上部的离开请用style.top属性.

2.offsetLeft :

现阶段目的到其上司层侧面的距离.

不能对其进行赋值.设置对象到页面左部的相距请用style.left属性.

3.offsetWidth :

当下指标的宽度.

与style.width属性的分别在于:如指标的肥瘦设定值为百分比升幅,则不管页面变大照旧变小,style.width都回去此比例,而offsetWidth则赶回在不一致页面中目的的上涨的幅度值实际不是百分比率

4.offsetHeight :

与style.height属性的界别在于:如目的的宽窄设定值为百分比惊人,则无论页面变大照旧变小,style.height都回去此比例,而offsetHeight则赶回在分歧页面中目的的惊人值并不是百分比率

5.offsetParent   :

时下指标的上级层对象.

注意.借使对象是总结在八个DIV中时,此DIV不会被用作是此指标的上级层,(即对象的顶头上司层会跳过DIV对象卡塔尔上级层是Table时则不会有毛病.

图片 1

接纳那一个天性,可以赢妥贴前指标在差别尺寸的页面中的相对地方.

得到相对位置脚本代码

function GetPosition(obj)

{

 var left = 0;

 var top   = 0;



 while(obj != document.body)

 {

        left = obj.offsetLeft;

        top   = obj.offsetTop;



        obj = obj.offsetParent;

 }



 alert(“Left Is : ” + left + “rn” + “Top   Is : ” + top);

}

 

6.scrollLeft :

目的的最左边到对象在当前窗口体现的限定内的左侧的间距.

便是在现身了横向滚动条的事态下,滚动条拉动的间距.

7.scrollTop

目的的最顶部到目的在日前窗口突显的限制内的顶边的间距.

就是在产出了纵向滚动条的气象下,滚动条推动的间隔.

大家这边说说多样浏览器对 document.body 的 clientHeight、offsetHeight 和
scrollHeight 的解释,这里说的是 document.body,假若是 HTML
控件,则又有差异,点击这里查看。

那多种浏览器分别为IE(Internet
Explorer)、NS(Netscape)、Opera、FF(FireFox)。

clientHeight

世家对 clientHeight
都未有何争议,都是为是内容可视区域的惊人,也便是说页面浏览器中能够观望内容的那些区域的可观,常常是最后四个工具条以下到状态栏以上的这几个区域,与页面内容非亲非故。

offsetHeight

IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。

NS、FF 认为 offsetHeight 是网页内容实际中度,可以低于 clientHeight。

scrollHeight

IE、Opera 认为 scrollHeight 是网页内容实际中度,能够低于 clientHeight。

NS、FF 以为 scrollHeight 是网页内容中度,可是最小值是 clientHeight。

可想而知地说

clientHeight 正是经过浏览器看内容的这么些区域中度。

NS、 FF 感觉 offsetHeight 和 scrollHeight
都以网页内容高度,只不过当网页内容低度小于等于 clientHeight
时,scrollHeight 的值是 clientHeight,而 offsetHeight 能够低于
clientHeight。

IE、Opera 感觉 offsetHeight 是可视区域 clientHeight
滚动条加边框。scrollHeight 则是网页内容实际高度。

同理

clientWidth、offsetWidth 和 scrollWidth
的解释与地点相通,只是把中度换来宽度就可以。

IE、Opera 以为 offsetHeight 是可视区域 clientHeight
滚动条加边框。scrollHeight 则是网页内容实际高度。 同理
clientWidth、offsetWidth 和 scrollWidth
的解说与地方相仿,只是把中度换成宽度就可以。

 

 

 

 

 zhoumeng 2011年0七月27日 于 前端波特兰开拓者队公布

发表评论

电子邮件地址不会被公开。 必填项已用*标注