获取html滚动条位置,js获取页面窗口大小以及滚动条位置,元素在页面位置

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;

}

var arrayPageScroll = new Array(xScroll, yScroll);

return arrayPageScroll;

}

上面的函数获取滚动条位置，返回数组，分别为滚动条X轴与Y轴的滚动值。

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 pageWidth, pageHeight;

// for small pages with total height less then height of the viewport

if (yScroll 

pageHeight = windowHeight;

} else {

pageHeight = yScroll;

}

// for small pages with total width less then width of the viewport

if (xScroll 

pageWidth = xScroll;

} else {

pageWidth = windowWidth;

}

// The windowWidth is the viewportWidth and the windowHeight is the viewportheight

var arrayPageSize = new Array(pageWidth, pageHeight, windowWidth, windowHeight);

return arrayPageSize;

}

上面的函数返回数组，分别为页面的宽高与视口的宽高

function getElementPos(el) {

var ua = navigator.userAgent.toLowerCase();

var isOpera = (ua.indexOf('opera') != -1);

var isIE = (ua.indexOf('msie') != -1 && !isOpera); // not opera spoof

if (el.parentNode === null || el.style.display == 'none') {

return false;

}

var parent = null;

var pos = [];

var box;

if (el.getBoundingClientRect) { //IE

box = el.getBoundingClientRect();

var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);

var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);

return {

x: box.left + scrollLeft,

y: box.top + scrollTop

};

} else if (document.getBoxObjectFor) { // gecko

box = document.getBoxObjectFor(el);

var borderLeft = (el.style.borderLeftWidth) ? parseInt(el.style.borderLeftWidth) : 0;

var borderTop = (el.style.borderTopWidth) ? parseInt(el.style.borderTopWidth) : 0;

pos = [box.x - borderLeft, box.y - borderTop];

} else { // safari & opera

pos = [el.offsetLeft, el.offsetTop];

parent = el.offsetParent;

if (parent != el) {

while (parent) {

pos[0] += parent.offsetLeft;

pos[1] += parent.offsetTop;

parent = parent.offsetParent;

}

}

if (ua.indexOf('opera') != -1 || (ua.indexOf('safari') != -1 && el.style.position == 'absolute')) {

pos[0] -= document.body.offsetLeft;

pos[1] -= document.body.offsetTop;

}

}

if (el.parentNode) {

parent = el.parentNode;

} else {

parent = null;

}

while (parent && parent.tagName != 'BODY' && parent.tagName != 'HTML') { // account for any scrolled ancestors

pos[0] -= parent.scrollLeft;

pos[1] -= parent.scrollTop;

if (parent.parentNode) {

parent = parent.parentNode;

} else {

parent = null;

}

}

return {

x: pos[0],

y: pos[1]

};

}

上面函数返回元素在页面的坐标位置

function   getWindowSize(){// 取当前浏览器width height

var w = 0;

var h = 0;

if(document.documentElement && document.documentElement.clientHeight) {

w = document.documentElement.clientWidth;

h = document.documentElement.clientHeight;

} else if (document.body && document.body.clientHeight) {

w = document.body.clientWidth;

h = document.body.clientHeight;

} else if(window.innerHeight) {

w = window.innerWidth;

h = window.innerHeight;

}

return {

w: w,

h: h

};

}