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

前端开发中跨平台。跨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

转载于:https://www.cnblogs.com/bhlsheji/p/5352114.html

相关资源：数据结构—成绩单生成器