Getpagesize and getpagescroll: Get the page size, window size, and scroll bar position

The page size, window size, and scroll bar position are different in different browsers, such as Firefox and IE. Different versions have different implementations even in the same browser, such as IE. This article provides two JavaScript functions that are compatible with all browsers and can obtain these three values.

Getpagesize can obtain the page size and window size. Run this function to obtain an object that contains the page width, page height, window width, and window height.

//getPageSize()function getPageSize(){ var xScroll, yScroll; if (window.innerHeight && window.scrollMaxY) {      xScroll = document.body.scrollWidth;     yScroll = window.innerHeight + window.scrollMaxY; } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac     xScroll = document.body.scrollWidth;     yScroll = document.body.scrollHeight; } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari     xScroll = document.body.offsetWidth;     yScroll = document.body.offsetHeight; } var windowWidth, windowHeight; if (self.innerHeight) { // all except Explorer     windowWidth = self.innerWidth;     windowHeight = self.innerHeight; } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode     windowWidth = document.documentElement.clientWidth;     windowHeight = document.documentElement.clientHeight; } else if (document.body) { // other Explorers     windowWidth = document.body.clientWidth;     windowHeight = document.body.clientHeight; }  // for small pages with total height less then height of the viewport if(yScroll < windowHeight){     pageHeight = windowHeight; } else {      pageHeight = yScroll; } // for small pages with total width less then width of the viewport if(xScroll < windowWidth){      pageWidth = windowWidth; } else {     pageWidth = xScroll; } arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)  return arrayPageSize;}

This function is easy to understand.

• The first part is to obtain the actual page size, which is achieved through an IF... else statement with three branches. The 1st branches are for Mozilla browsers such as Firefox, 2nd for general ie browsers, and 3rd for IE Mac browsers.
• The second part is to obtain the actual size of the window, which is implemented through an IF... else statement with three branches. The 1st branches are for Mozilla browsers such as Firefox, 2nd for strict mode IE 6.0, and 3rd for general IE and other browsers.
• The third part is to adjust the page size when the page height or width is less than the window height or width. Even if the page size is not enough, we can see the window size, so the adjusted value is more in line with the actual needs.

The getpagescroll function can give the position of the scroll bar. Execute this function to obtain an object that contains the horizontal position and vertical position of the scroll bar.

//getPageScroll()function getPageScroll(){ var yScroll; if (self.pageYOffset) {     yScroll = self.pageYOffset; } else if (document.documentElement && document.documentElement.scrollTop){ // Explorer 6 Strict     yScroll = document.documentElement.scrollTop; } else if (document.body) {// all other Explorers     yScroll = document.body.scrollTop; } arrayPageScroll = new Array('',yScroll)  return arrayPageScroll;}

This function is easier to read. It is implemented through an IF... else statement with three branches. The 1st branches are for Mozilla browsers such as Firefox, 2nd for strict mode IE 6.0, and 3rd for general IE and other browsers.

You can use the complete HTML code to test the two functions.