首页 > 代码库 > [转载]js 和 jquery 获取页面和滚动条的高度 视口高度文档高度

[转载]js 和 jquery 获取页面和滚动条的高度 视口高度文档高度

2024-07-23 05:22:55   223人阅读

  • 转载自:http://www.cnblogs.com/rainbow661314/p/3317106.html
  • js 和 jquery 获取页面和滚动条的高度  
  •    
  • //页面位置及窗口大小  
  • 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};  
  •   
  • };  
  •   
  • //滚动条位置  
  • 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  
  •   
  • 获取浏览器显示区域的高度 ：   
  • $(window).height();   
  • 获取浏览器显示区域的宽度 ：$(window).width();   
  • 获取页面的文档高度   
  • ：$(document).height();   
  • 获取页面的文档宽度 ：$(document).width();  
  •   
  • 获取滚动条到顶部的垂直高度   
  • ：$(document).scrollTop();   
  • 获取滚动条到左边的垂直宽度 ：$(document).scrollLeft();   
  •   
  •   
  • 计算元素位置和偏移量   
  •   
  • offset方法是一个很有用的方法，它返回包装集中第一个元素的偏移信息。默认情况下是相对body的偏移信息。结果包含 top和left两个属性。  
  •   
  • offset(options, results)   
  • options.relativeTo　　指定相对计   
  • 算偏移位置的祖先元素。这个元素应该是relative或absolute定位。省略则相对body。   
  • options.scroll　　是否把   
  • 滚动条计算在内，默认TRUE   
  • options.padding　　是否把padding计算在内，默认false   
  • options.margin   
  • 　　是否把margin计算在内，默认true   
  • options.border　　是否把边框计算在内，默认true  
  •   
  • http://www.cnblogs.com/hoojo/archive/2012/02/16/2354663.html  
  •   
  • alert($(window).height()); //浏览器当前窗口可视区域高度   
  • alert($(document).height()); //浏览器当前窗口文档的高度   
  • alert($(document.body).height());//浏览器当前窗口文档body的高度   
  • alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin   
  • alert($(window).width()); //浏览器当前窗口可视区域宽度   
  • alert($(document).width());//浏览器当前窗口文档对象宽度   
  • alert($(document.body).width());//浏览器当前窗口文档body的高度   
  • alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin   
  •    
  • // 获取页面的高度、宽度  
  • function getPageSize() {  
  •     var xScroll, yScroll;  
  •     if (window.innerHeight && window.scrollMaxY) {  
  •         xScroll = window.innerWidth + window.scrollMaxX;  
  •         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      
  •         if (document.documentElement.clientWidth) {  
  •             windowWidth = document.documentElement.clientWidth;  
  •         } else {  
  •             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 = xScroll;  
  •     } else {  
  •         pageWidth = windowWidth;  
  •     }  
  •     arrayPageSize = new Array(pageWidth, pageHeight, windowWidth, windowHeight);  
  •     return arrayPageSize;  
  • }  
  •    
  • // 滚动条  
  • document.body.scrollTop;  
  • $(document).scrollTop(); 

[转载]js 和 jquery 获取页面和滚动条的高度 视口高度文档高度


联系
我们