JS and JQUERY get the page size scrollbar position and element position of sample code

  • 2020-03-30 00:56:16
  • OfStack

Js and jquery get page size, scroll bar position, element position


//Page position and window size 
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};
};
//Scroll bar position
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};
}

jquery

Gets the height of the browser display area: $(window).height();
Gets the width of the browser display area: $(window).width();
Gets the document height of the page: $(document).height();
Gets the document width of the page: $(document).width();

Gets the vertical height of the scroll bar to the top: $(document).scrolltop ();
Gets the vertical width of the scroll bar to the left: $(document).scrollleft ();

Calculate element positions and offsets
The offset method is a useful method that returns offset information for the first element in the wrapper set. The default is the offset information relative to the body. The result contains the top and left attributes.
Offset (options, the results)
Options. RelativeTo specifies the ancestor element at the relative count offset position. The element should be relative or absolute. Ellipsis is relative to the body.
Options.scroll is TRUE by default if the scrollbar is included
Options. Whether padding counts padding or not, the default is false
Options. Margin whether to calculate margin, default true
The default is true if the options. Border counts the border


Related articles: