HTML查找滚动条代码的位置,HTML定位（滚动条、元素，视口）定位(示例代码)

你好

你好

你好

HeaderDataData

/**

* 滚动条的位置

* @param {Object} w*/

functiongetScrollOffsets(w){

w=w||window;//除了IE 8以及更早的版本以外，其他浏览器都支持

if(w.pageXOffset!= null){return{x:w.pageXOffset,y:w.pageYOffset};

}/**

* document.compatMode用来判断当前浏览器采用的渲染方式。

* BackCompat：标准兼容模式关闭。

* CSS1Compat：标准兼容模式开启。

* 当document.compatMode等于BackCompat时，浏览器客户区宽度是document.body.clientWidth;滚动条的位置document.body.scrollLeft

* 当document.compatMode等于CSS1Compat时，浏览器客户区宽度是document.documentElement.clientWidth;滚动条的位置 document.documentElement.scrollLeft*/

vard=w.document;if(document.compatMode== "CSS1Compat"){return{x:d.documentElement.scrollLeft,y:d.documentElement.scrollTop};

}else{return{x:d.body.scrollLeft,y:d.body.scrollTop};

}

}//作为一个对象的w和h属性返回视口的尺寸

functiongetViewportSize(w){//使用指定的窗口， 如果不带参数则使用当前窗口

w=w||window;//除了IE8及更早的版本以外，其他浏览器都能用

if(w.innerWidth!= null){return{w: w.innerWidth, h: w.innerHeight};

}//对标准模式下的IE(或任意浏览器)

vard=w.document;if(document.compatMode== "CSS1Compat"){return{w: d.documentElement.clientWidth, h: d.documentElement.clientHeight};

}else{return{w: d.body.clientWidth, h: d.body.clientHeight};

}

}/**

* 这个方法返回元素在视口坐标中的位置。为了转换为甚至用户滚动浏览器窗口以后任然有效的文档坐标，需要加上滚动偏移量：

* getBoundingClientRect()方法。该方法是在IE5中引入的，而现在当前的所有浏览器都实现了。它不需要参数，返回left、right、top、bottom属性的对象。

* @param {Object} e*/

functiongetElementRect(e){varbox=e.getBoundingClientRect();varoffsets=getScrollOffsets();varx=box.left+offsets.x;vary=box.top+offsets.y;varw=box.width||box.right-box.left;varh=box.height||box.bottom-box.top;

console.log({x:x, y:y ,w:w, h:h})return{x:x, y:y ,w:w, h:h};

}