页面大小、窗口大小和滚动条位置这三个数值在不同的浏览器例如Firefox和IE中有着不同的实现。即使在同一种浏览器例如IE中，不同版本也有不同的实现。本文给出两个能兼容目前所有浏览器的Javascript函数，能够获得这三个数值。
GetPageSize能够获得页面大小和窗口大小。执行这个函数会得到一个包含页面宽度、页面高度、窗口宽度、窗口高度的对象。
function GetPageSize() {
var scrW, scrH;
if(window.innerHeight && window.scrollMaxY) { // Mozilla
scrW = window.innerWidth + window.scrollMaxX;
scrH = window.innerHeight + window.scrollMaxY;
} else if(document.body.scrollHeight > document.body.offsetHeight){ // all but IE Mac
scrW = document.body.scrollWidth;
scrH = document.body.scrollHeight;
} else if(document.body) { // IE Mac
scrW = document.body.offsetWidth;
scrH = document.body.offsetHeight;
}
var winW, winH;
if(window.innerHeight) { // all except IE
winW = window.innerWidth;
winH = window.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) { // IE 6 Strict Mode
winW = document.documentElement.clientWidth;
winH = document.documentElement.clientHeight;
} else if (document.body) { // other
winW = document.body.clientWidth;
winH = document.body.clientHeight;
} // for small pages with total size less then the viewport
var pageW = (scrW<winW) ? winW : scrW; var pageH = (scrH<winH) ? winH : scrH;
return {PageW:pageW, PageH:pageH, WinW:winW, WinH:winH};
}
这个函数还是很容易读懂的。
第一部分是获得页面的实际大小，通过一个有3个分支的if...else语句实现。第1个分支针对Mozilla家族的浏览器例如Firefox；第2个分支针对普通IE浏览器；第3个分支针对IE Mac浏览器。
第二部分是获得窗口的实际大小，通过一个有3个分支的if...else语句实现。第1个分支针对Mozilla家族的浏览器例如Firefox；第2个分支针对Strict模式的IE 6.0 浏览器；第3个分支针对普通IE和其他浏览器。
第三个部分是在页面高度或者宽度少于窗口高度或者宽度的情况下，调整页面大小的数值。因为即使页面大小不足窗口大小，我们看到的仍然是窗口大小，所以调整后的数值更加符合实际需要。
GetPageScroll函数能够给出滚动条的位置。执行这个函数会得到一个包含滚动条水平位置和滚动条垂直位置的对象。
function GetPageScroll() {
var x, y;
if(window.pageYOffset) { // all except IE
y = window.pageYOffset;
x = window.pageXOffset;
} else if(document.documentElement && document.documentElement.scrollTop) { // IE 6 Strict
y = document.documentElement.scrollTop;
x = document.documentElement.scrollLeft;
} else if(document.body) { // all other IE
y = document.body.scrollTop;
x = document.body.scrollLeft;
}
return {X:x, Y:y};
}
这个函数更为易读。它通过一个有3个分支的if...else语句实现。第1个分支针对Mozilla家族的浏览器例如Firefox；第2个分支针对Strict模式的IE 6.0 浏览器；第3个分支针对普通IE和其他浏览器。
可以通过下来完整的Html代码来测试一下这两个函数。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head><script type="text/javascript">
... GetPageSize函数定义 ...
... GetPageScroll函数定义 ...
function main() {
var div = document.getElementById("div");
for(var i=0; i<200; i++) {
document.body.appendChild(document.createTextNode("Hello, World!"));
document.body.appendChild(document.createElement("br"));
}
var sz = GetPageSize();
alert([sz.PageW,sz.PageH,sz.WinW,sz.WinH].join(", "));
window.scrollTo(0, sz.PageH);
var sl = GetPageScroll();
alert([sl.X,sl.Y].join(", "));
}</script>
</head>
<body onload="main();"></body>
</html>
这两个函数虽然不难，但是手头如果没有，需要起来想要凭空写出还是很困难的，因为测试不同浏览器的实现情况实属不易。因此写成文章以供速查。
分享到：
相关推荐
总的来说，无论是使用纯JavaScript还是JQuery，都可以灵活地获取页面的尺寸、滚动条位置和元素位置。对于开发者而言，了解并掌握这些方法将有助于提高前端开发的效率和质量。希望本文所提供的知识点能够帮助大家在...
在`OnSize`消息处理函数中，你需要更新滚动条的范围和页面大小，以适应窗口尺寸的变化。`OnHScroll`和`OnVScroll`函数则用于处理滚动条的操作，如滚动、拖动等。 接下来，我们讨论如何通过GDI+加载图片并设置滚动条...
在易语言中，可能需要使用类似`创建窗口类`、`创建窗口`等命令，然后通过API函数`SetScrollInfo`来调整滚动条的位置和范围。 3. **显示滚动条**：在Windows中，显示或隐藏滚动条可以使用`ShowScrollBar`函数，传入...
- **适用场景**：当需要获取可视区域内不包含滚动条的实际宽度和高度时使用。 - **示例代码**： ```javascript const width = document.body.clientWidth; const height = document.body.clientHeight; ``` 2...
在前端开发中，经常需要获取浏览器的可见窗口大小以及其他相关信息，以便能够根据不同的设备和浏览器环境来优化网页布局与用户体验。本文将详细解析如何通过JavaScript来获取不同浏览器下的窗口尺寸，并探讨一些特殊...
其中一项常见需求是获取浏览器窗口的各种属性值，比如宽度、高度等，这对于响应式设计或某些特定功能（如弹窗位置计算）非常有用。 #### 一、主要窗口属性 在提供的代码示例中，通过`getInfo`函数展示了如何获取一...
在进行Web开发时，尤其是在使用Ajax技术对页面进行动态更新时，经常需要精确获取页面元素的位置、大小以及滚动条的位置信息。这些信息对于确保元素在页面上正确地显示和交互至关重要。在没有提供原生JavaScript解决...
`SCROLLINFO`结构体包含了滚动条的各种属性，如当前位置、范围、页面大小等。在调用`GetScrollInfo`前，我们需要设置`SCROLLINFO`结构体的`fMask`成员，它是一个位掩码，用于指定我们希望获取哪些滚动条信息。例如，...
6. **处理WM_SIZE消息**：当窗口大小改变时，你可能需要调整滚动条的位置和大小，以适应新的窗口布局。 压缩包中的"ex001"可能是示例代码或项目的源文件，用于演示上述步骤。这个例子可能包含了创建滚动条的完整...
2. `GetScrollInfo()`：获取滚动条的信息，包括当前位置、最大值、最小值、页面大小等。 3. `SetScrollInfo()`：设置滚动条的状态，包括改变滚动条的位置、范围等。 4. `SBM_SETPOS`、`SBM_GETPOS`、`SBM_SETRANGE...
在JavaScript编程中，获取页面和屏幕尺寸大小是前端开发中常见的需求之一，这涉及到一系列的属性和方法，用于测量浏览器窗口、文档元素以及设备屏幕的大小。以下将详细解析如何利用JavaScript来获取这些参数，包括...
无论哪种编程语言或库，核心思路都是监听用户操作（例如按钮点击），然后调用相应的滚动方法来改变滚动条位置。为了使滚动效果平滑，还可以设置动画效果，让滚动过程看起来更加自然。 在Demo的实现过程中，可能还会...
4. scrollTop 和 scrollLeft：获取元素的滚动条位置。 三、Style 对象 Style 对象提供了多个属性来获取元素的样式信息。其中包括： 1. width 和 height：获取元素的宽度和高度，excluding 边框、padding、margin ...
滚动条位置 通过获取滚动条的位置，可以实现实时滚动监测等功能。 - **document.body.scrollTop**: 获取垂直滚动条的当前位置，单位为像素。 - **document.body.scrollLeft**: 获取水平滚动条的当前位置，单位为...
- 通过JavaScript，在`handleScroll`函数内部，根据滚动位置和弹出框的大小，计算出新的位置，并用`style.top`和`style.left`设置元素的坐标。 5. **防抖（Debounce）与节流（Throttle）**： - 因为scroll事件...
### JavaScript 获取当前窗口的所有大小值 在Web开发中，经常需要获取浏览器窗口或者特定元素的尺寸信息，这对于响应式设计、动态布局调整等场景尤为重要。本文将详细介绍如何使用JavaScript来获取当前窗口的各种...
在该函数内部，我们可以获取滚动条的位置，并根据需要调整元素的位置。 ```javascript window.onscroll = function() { var scrollTop = window.pageYOffset || document.documentElement.scrollTop; var layer ...
1. **布局系统**：WPF提供了一套强大的布局系统，包括Grid、StackPanel、DockPanel、Canvas等，它们可以根据需要自动调整子元素的位置和大小。例如，Grid布局可以设置列和行的自动伸缩，从而实现控件随界面大小变化...
你可以通过设置其SCROLLINFO结构体的参数来配置滚动条的行为，如最大值、最小值、页面大小和当前位置。同时，可以通过响应WM_VSCROLL和WM_HSCROLL消息来处理滚动事件。 滑动条控件（CSliderCtrl）则更像一个可调整...