1.获取窗口的宽度
//作为一个对象的w和h属性返回视口的尺寸
function getViewportSize(w){
//使用指定的窗口, 如果不带参数则使用当前窗口
w = w || window;
//除了IE8及更早的版本以外,其他浏览器都能用
if(w.innerWidth != null)
return {w: w.innerWidth, h: w.innerHeight};
//对标准模式下的IE(或任意浏览器)
var d = w.document;
//CSS1Compat:标准兼容模式开启。 浏览器宽度:document.documentElement.clientWidth
if(document.compatMode == "CSS1Compat")
return {w: d.documentElement.clientWidth, h: d.documentElement.clientHeight};
//对怪异模式下的浏览器
//BackCompat:标准兼容模式关闭。浏览器宽度:document.body.clientWidth;
return {w: d.body.clientWidth, h: d.body.clientHeight};}
2. 检测页面的滚动条是否滚动到底部
//检测滚动条是否滚动到页面底部
function isScrollToPageBottom(){
//文档高度
var documentHeight = document.documentElement.offsetHeight;
//窗口的高度
var viewPortHeight = getViewportSize().h;
//pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
//所有主流浏览器都支持 pageXOffset 和 pageYOffset 属性。
// IE 8 及 更早 IE 版本不支持该属性,但可以使用 "document.body.scrollLeft" 和 "document.body.scrollTop" 属性 。
var scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
// 小于 20 代表滚动到了底部 反之没有滚到底部
return documentHeight - viewPortHeight - scrollHeight < 20;}