JavaScript 工作区滚动距离及其兼容性-技术教程-四时宝库

滚动距离

document.body.scrollTop IE、FF

document.documentElement.scrollTop chrome

兼容性写法:

var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;

与 document.documentElement 属性不同的是, document.body 属性返回 <body> 元素, document.documentElement 属性返回 <html> 元素。

根节点

有两种特殊的文档属性可用来访问根节点：

document.documentElement chome object HTMLHtmlElement

document.body IE、FF object HTMLBodyElement

第一个属性可返回存在于XML以及HTML文档中的文档根节点(html标记)。

第二个属性是对HTML页面的特殊扩展,提供了对<body>标签的直接访问(body标记)。

窗口尺寸、工作区尺寸

可视区尺寸宽度

document.body.clientWidth IE、FF

document.documentElement.clientWidth chome

兼容性写法：

document.documentElement.clientWidth || document.body.clientWidth;

可视区尺寸高度

document.body.clientHeight IE、FF

document.documentElement.clientHeight chome

兼容性写法：

document.documentElement.clientHeight || document.body.clientHeight;

获取浏览器窗口水平滚动条的位置

document.body.scrollLeft;

document.documentElement.scrollLeft

兼容性写法：

document.documentElement.scrollLeft || document.body.scrollLeft;

获取浏览器窗口垂直滚动条的位置

document.body.scrollTop IE、FF

document.documentElement.scrollTop chrome

兼容性写法：

document.documentElement.scrollTop || document.body.scrollTop;

注意：IE、FF已经支持documentElement对象的各种属性, 而

以上兼容性写法不影响所获的属性值

编写自定义函数：

// 获取浏览器窗口的可视区域的宽度
function getViewPortWidth() {
		return document.documentElement.clientWidth || document.body.clientWidth;
}

// 获取浏览器窗口的可视区域的高度
function getViewPortHeight() {
		return document.documentElement.clientHeight || document.body.clientHeight;
}

// 获取浏览器窗口水平滚动条的位置
function getScrollLeft() {
		return document.documentElement.scrollLeft || document.body.scrollLeft;
}

// 获取浏览器窗口垂直滚动条的位置
function getScrollTop() {
		return document.documentElement.scrollTop || document.body.scrollTop;
}

<!DOCTYPE HTML>声明对JavaScript获取窗口宽度和高度的影响

四时宝库