• js 和 jquery 获取页面和滚动条的高度 视口高度文档高度


    • 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();  
  • 相关阅读:
    使用PowerDesigner 15对现有数据库进行生成图表结构
    dynamic的使用
    js 字符串的replace() 方法和实现replaceAll() 方法
    学习新属性 requestAnimationFrame
    Mapbox 地图样式规范
    Emmet插件使用方法总结
    js循环遍历性能
    lunix部署其前端项目常见报错
    componentWillMount和componentDidMount的区别
    控制浏览器禁止缓存
  • 原文地址:https://www.cnblogs.com/rainbow661314/p/3317106.html
Copyright © 2020-2023  润新知