web 开发小功能的记录

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