页面距离总结

document.body.scrollTop用法

网页可见区域宽: 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;
屏幕可用工作区宽度:window.screen.availWidth;

scrollHeight: 获取对象的滚动高度。 
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标

event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标 
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
Post by molong on 2009-05-19 11:57 PM #1

要获取当前页面的滚动条纵坐标位置,用:
document.documentElement.scrollTop;
而不是:
document.body.scrollTop;
documentElement 对应的是 html 标签,而 body 对应的是 body 标签。

在标准w3c下,document.body.scrollTop恒为0,需要用document.documentElement.scrollTop来代替;
如果你想定位鼠标相对于页面的绝对位置时,你会发现google里面1000篇文章里面有999.99篇会让你使用 event.clientX+document.body.scrollLeft,event.clientY+document.body.scrollTop, 如果你发现你的鼠标定位偏离了你的想象,请不要奇怪,这是再正常不过的事情。
ie5.5之后已经不支持document.body.scrollX对象了。
所以在编程的时候,请加上这样的判断
if (document.body && document.body.scrollTop && document.body.scrollLeft)
{
top=document.body.scrollTop;
left=document.body.scrollleft; 
}
if (document.documentElement && document.documentElement.scrollTop && document.documentElement.scrollLeft)
{
top=document.documentElement.scrollTop;
left=document.documentElement.scrollLeft;
}

时间: 2024-10-05 12:41:02

页面距离总结的相关文章

latex中页面距离的设置

1.页面设置 a4 会给你一个较小的页面,为了使用更多的控制,可用 geometry宏包和命令 \layout . 2.改变长度 在latex里改变长度的命令是 \addtolength 和 \setlength.latex可认的是 cm, mm, in 和 pt. 变量可设为负数.一个例子是 \addtolength{\parindent}{-5mm} 一些有用的变量是: 页面设置 \columnsep: 列间距 \topmargin: 页眉到页边的距离 \topskip: 页眉与正文的距离

JS实现滚动条滚到页面距离底部300px时执行事件的方法

scrollTop为滚动条在Y轴上的滚动距离. clientHeight为内容可视区域的高度. scrollHeight为内容可视区域的高度加上溢出(滚动)的距离 $(window).scroll(function(){ var scrollTop = $(this).scrollTop(); var scrollHeight = $(document).height(); var windowHeight = $(this).height(); if(scrollHeight-scrollTo

JS解决页面多次,重复请求 的2个方法

最近的一个case,在web页下,鼠标向下滚动翻页动态请求数据的时候.一般都是判断当前页面距离顶部的高度与整个html的长度之差来决定是否请求下一页的数据. 如果不进行相应处理,滑动事件会触发多次,导致请求多次或者重复请求(取决于代码设计) 思路1: 滑动到下方第一次触发请求后,移除滑动监听,等待请求返回,继续监听滑动事件. 思路2: 对于一次滑动有产生多次不重复的请求的情况.可以让这些请求都进入队列,滑动时判断标志位,为真则取出队列第一个请求并执行,为假则不执行.待请求返回时设置标志位true

MUI(3)

本篇博文是继续上篇博文MUI(2).上面这幅图是博文MUI(1)中实现的效果,在博文MUI(1)中提到了2个页面,一个页面是index.html,另一个页面是index_list.html页面.上面这幅图中红色框子是index.html页面,蓝色框子是index_list.html页面.两个页面本来是独立的两个页面,但是组合在一起之后就形成了如上面这幅图所示的效果.在一个页面中显示另一个页面. 实现方法很简单, 1 <script type="text/javascript" c

MUI(5)

今天实现9宫格菜单.先上效果图: 就是这个效果咯,界面不太美观,底部导航栏是为了苹果用户没有返回按键设计的,只是为了方便演示而已,没有做过多的处理.首先先说一下这个底部导航栏如何实现,这个底部导航栏小编我写在了主页面index.html中,下面附上代码: 1 <!-- 底部nav开始 --> 2 <nav class="mui-bar mui-bar-tab"> 3 <a id="goBack" class="mui-tab-

8.0 BOM对象

主要的掌握的知识结构图 1 Window 2 控制窗口.框架.弹出窗口 3 利用location对象中的页面信息 4 使用 navigator 对象了解浏览器 1.1 BOM的核心对象是window,它表示浏览器的一个实例.在浏览器中,window对象有双重角色,它既是通过JavaScript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象. 全局作用域 由于Window扮演着ECMAScript中Global 对象的角色,因此所有在全局作用域中声明的变量.函数都会变成w

【Jobs】用LaTeX制作简历

TeX与LaTeX TeX是由著名的计算机科学家Donald E. Knuth(高德纳)发明的排版系统,利用TeX可以很容易地生成高质量的dvi文件,打印输出.利用dvips,dvipdfmx,pdfLaTeX等程序生成pdf,ps,文件,LaTeX2html生成html文件. 它在学术界十分流行,特别是数学.物理学和计算机科学界.TeX被普遍认为是一个很好的 排版工具,特别是在处理复杂的数学公式时.利用诸如是LaTeX等终端软件,TeX就能够排版出精美的文本.通过CTAN上的宏包可以扩展其功能

禁用浏览器后退按钮

基本上是3个solution: 1).设置网页过期(服务器端) 2).javascript:window.history(客户端) 3).对于键盘的backspace.通过window.event来过滤,当然要考虑的是对于Input控件,要保持删除的功能. <script type="text/javascript"> function backspace() { if (event.keyCode == 8 && event.srcElement.tagN

JS滚轮事件(mousewheel/DOMMouseScroll)了解

已经没有了小学生时代过目不忘的记忆力了,很多自己折腾的东西.接触的东西,短短1年之后就全然不记得了.比方说,完全记不得获取元素与页面距离的方法(getBoundingClientRect),或者是不记得现代浏览器下触发DOM自定义事件的方法(dispatchEvent). 显然,适当的温习,翻阅以前的东西,或者自己空余时间处理相关的东西还是有必要的.其实,细想,东西记不住是自己自身原因,在折腾的时候就没有想方设法牢记(而不是通过反复使用记住).比方说getBoundingClientRect就是