Tag标签 | 收藏本站 | 设为首页 | 参考书籍 | web前端技术交流①群:WEB前端技术交流群 会员登录 | 会员注册

首页文字描述

会员投稿 RSS订阅 专注web前端: 要么读书、要么旅行,身体和精神必须要有一个在路上。【每天一小步,成功一大步】
搜索: 您的位置主页 > WEB前端 > Jquery/JS > document.body.scrollTop总是为0的解决方法
隐藏/显示侧边栏

document.body.scrollTop总是为0的解决方法

2014-05-24 23:36    来源:未知    责任编辑:admin    字号【

在做网页的时候,可能有这么一个需求:要求你固定某个层,随着滚动条滚动,也就是显示在一个固定的位置。此时就要用到document.body.scrollTop来获取滚动条滚动的距离!

为何你的document.body.scrollTop总是为零呢?

解答:在用到scrollTop、scrollLeft、clientHeight、clientWidth等属性的时候,在以HTML标签开头的页面中有效。但是,如果是一个符合W3C标准的页面,肯定是DTD开头,此时window.body.scrollTop就无效了。使用DTD时用document.documentElement.scrollTop代替document.body.scrollTop就可以了。
HTML和XHTML的JS的方法运用里,是有所不同的,注意区分!!!

window.onscroll=function () {
    var oFix=document.getElementById("divfix");
    oFix.style.top=document.body.scrollTop+"px";
    }  //  只适合HTML页面


window.onscroll=function () {
    var oFix=document.getElementById("divfix");
    oFix.style.top=document.documentElement.scrollTop+"px";
    } //  W3C标准页面


var    scrollTop=document.documentElement.scrollTop||document.body.scrollTop;  // 完美兼容,获取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 相对文档的水平座标+垂直方向滚动的量
要获取当前页面的滚动条纵坐标位置,用:
document.documentElement.scrollTop;
而不是:
document.body.scrollTop;
documentElement 对应的是 html 标签,而 body 对应的是 body 标签


更多
Tags 标签: scrollTop
责任编辑:admin
设为首页 | 加入收藏 | 关于我们| 版权声明 | 在线留言 | 网站地图 |