前端开发跨浏览器计算页面大小滚动高度

Posted phlsheji

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端开发跨浏览器计算页面大小滚动高度相关的知识,希望对你有一定的参考价值。

前端开发中跨平台。跨USER-AGENT的适配很繁琐


想要得到浏览器px大小非常烦。因此以下2个函数非常实用

这两个javascript函数很有用,用来计算浏览器页面大小,窗体大小,以及滚动高度,源码例如以下:



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;
    }

    var pageHeight, pageWidth;
    // for small pages with total height less then height of the viewport
    pageHeight = yScroll < windowHeight ? windowHeight: yScroll;
    // for small pages with total width less then width of the viewport
    pageWidth = xScroll < windowWidth ? windowWidth: xScroll;
    return {
        pageWidth: pageWidth,
        pageHeight: pageHeight,
        windowWidth: windowWidth,
        windowHeight: windowHeight
    };
}
function getPageScroll() {
    var xScroll, yScroll;
    if (self.pageYOffset) {
        yScroll = self.pageYOffset;
        xScroll = self.pageXOffset;
    } else if (document.documentElement && document.documentElement.scrollTop) { // Explorer 6 Strict
        yScroll = document.documentElement.scrollTop;
        xScroll = document.documentElement.scrollLeft;
    } else if (document.body) { // all other Explorers
        yScroll = document.body.scrollTop;
        xScroll = document.body.scrollLeft;
    }
    return {
        xScroll: xScroll,
        yScroll: yScroll
    };
}

參考     http://my.oschina.net/jockchou/blog/465220


以上是关于前端开发跨浏览器计算页面大小滚动高度的主要内容,如果未能解决你的问题,请参考以下文章

计算跨浏览器 iframe 高度

前端技术 -- 页面滚动条到一定高度后出现置顶按钮

前端基础:viewports理解、页面各种宽度理解

js获取各种高度

滚动时更改元素的高度

使用jQuery实现轻量级、跨浏览器和高度可定制的动画滚动