搜档网
当前位置:搜档网 › js返回网页顶部scrollTop用法及window.onscroll事件

js返回网页顶部scrollTop用法及window.onscroll事件

js返回网页顶部scrollTop用法及window.onscroll事件
js返回网页顶部scrollTop用法及window.onscroll事件

js返回网页顶部scrollTop用法及window.onscroll事件

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;

}

原生window.onscroll事件

var isChrome = https://www.sodocs.net/doc/3014628308.html,erAgent.toLowerCase().match(/chrome/) != null,

top;

if(isChrome){

bottomNav.style.position = "absolute";//("position","absolute")

window.onscroll = function(){

if (document.body){

top=document.body.scrollTop;

}

else if(document.documentElement)

{

top=document.documentElement.scrollTop;

}

bottomNav.style.top = 150+top+"px";

}

}else{

bottomNav.style.postion = 'fixed';

}

网页设计模拟题-3

网页设计模拟题三 一、单项选择题 1.HTML文本显示状态代码中,表示?() A文本加注下标线 B文本加注上标线 C文本闪烁 D文本或图片居中 2.动态HTML中设定路径移动时间的属性是?() A.Bounce B.Duration C.Repeat D.Target 3.下面CGI脚本中的通用格式和content-types不是一一对应的是哪一项?() A.HTML与text/html B.Text与text/plain C.GIF与image/gif D.MPEG与image/jpeg 4.下列对CSS内容表述不正确的一项是?() A伪类和伪元素不应用HTML的CLASS属性来指定 B一般的类不可以与伪类和伪元素一起使用 C一个已访问连接可以定义为不同颜色的显示 D一个已访问连接可以定义为不同字体大小和风格 5.用户可以在()命令的动作中见到canAcceptCommand。 A. Sort Table B. Format Table C. Set Color Scheme D. Clean Up HTML 6.创建一个滚动菜单的HTML代码是?() A.

B. C.