JS滾動頁面到某一位置時觸發指定事件能夠增強用戶體驗或是提高性能，其中使用最多的場景是加載更多，當鼠標滾動至頁面下方時，自動加載下一頁的內容。另一個常用的場景是當用戶滾動至頁面某一地方時，頁面會給出提示或是將某些重要信息或按鈕顯示出來。實現這些效果的關鍵是要區分clientHeight、scrollHeight、offsetHeight等屬性的區別。剛好最近項目中有用到過這些概念，今天就抽空整理下關於這幾個屬性的區別。
1.概念
clientHeight/clientWidth
指元素可見區域的高度，容器的高度，不包括border和滾動條的高度。clientHeight與height值差不多，如果沒有邊框和滾動條的話，兩者值相等，都是指容器的高度。火狐與IE下的值是一樣的。
//獲得元素的可見區域高度 不傳參數表示獲取瀏覽器窗口的可視高度 getClientHeight:function(_elem){ if(!!_elem){ return _elem.clientHeight; }else{ return window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; } }
offsetHeight/offsetWidth
指元素容器的高度，加上邊框和滾動條的高度，如果有設置boder和滾動條的話。
getOffsetHeight:function(_elem){
if(_elem){ return _elem.offsetHeight; }else{ return document.documentElement.offsetHeight || document.body.offsetHeight; } }
scrollHeight/scrollWidth
指元素內容的高度，而不是容器的高度。當元素內容的高度大於容器高度時，指元素內容的高度。
getScrollHeight:function(_elem){ if(_elem){ return _elem.scrollHeight; }else{ return document.documentElement.scrollHeight || document.body.scrollHeight; } }
offsetTop/offsetLeft
offsetTop:元素距離父元素頂端的距離。當前對象到其上級層頂部的間隔。
offsetLeft:元素距離父元素左側的距離。當前對象到其上級層左側的間隔。
scrollTop/scrollLeft
scrollTop:元素中垂直滾動條滾動的距離。若元素中沒有滾動條，則滾動距離為0。
scrollLeft:元素中水平滾動條滾動的距離。若元素中沒有滾動條，則滾動距離為0。
2.案例
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" Content="text/html; charset=utf-8;"> <title>JS滾動顯示指定內容</title> <meta name="author" content="rainna" /> <meta name="keywords" content="rainna's js lib" /> <meta name="description" content="js" /> <style> *{padding:0;margin:0;} .m-cnt{width:600px;margin:0 auto;line-height:2;} .m-cnt img{display:block;width:100%;} .m-cnt .info{background:rgba(97, 207, 247, 0.5);line-height:80px;} .pos{position:fixed;top:0;width:600px;} </style> </head> <body> <div class="m-cnt"> <p>JS滾動頁面到某一位置時觸發指定事件能夠增強用戶體驗或是提高性能，其中使用最多的場景是加載更多，當鼠標滾動至頁面下方時，自動加載下一頁的內容。另一個常用的場景是當用戶滾動至頁面某一地方時，頁面會給出提示或是將某些重要信息或按鈕顯示出來。實現這些效果的關鍵是要區分clientHeight、scrollHeight、offsetHeight屬性的區別。剛好最近項目中有用到過這些概念，今天就抽空整理下關於這幾個屬性的區別。</p> <p><strong>clientHeight/clientWidth</strong>:指元素可見區域的高度，容器的高度，不包括border和滾動條的高度。clientHeight與height值差不多，如果沒有邊框和滾動條的話，兩者值相等，都是指容器的高度。火狐與IE下的值是一樣的。</p> <p><strong>offsetHeight/offsetWidth</strong>:指元素容器的高度，加上邊框和滾動條的高度，如果有設置boder和滾動條的話。</p> <p><strong>scrollHeight/scrollWidth</strong>:指元素內容的高度，而不是容器的高度。當元素內容的高度大於容器高度時，指元素內容的高度。</p> <p><strong>offsetTop/offsetLeft</strong>:offsetTop:元素距離父元素頂端的距離。當前對象到其上級層頂部的間隔。<br />offsetLeft:元素距離父元素左側的距離。當前對象到其上級層左側的間隔。</p> <p><strong>scrollTop/scrollLeft</strong>:scrollTop:元素中垂直滾動條滾動的距離。若元素中沒有滾動條，則滾動距離為0。<br />scrollLeft:元素中水平滾動條滾動的距離。若元素中沒有滾動條，則滾動距離為0。</p> <p class="info" id="info">特殊顯示的內容特殊顯示的內容特殊顯示的內容特殊顯示的內容</p> <p><img src="http://m2.img.srcdd.com/farm5/d/2014/1020/15/BC20A76398278107A49FFC5761F67587_B1280_1280_650_650.jpeg" /></p> <p><img src="http://m3.img.srcdd.com/farm4/d/2014/1020/15/556E38E2D06F144114550AF1C699E60D_B1280_1280_650_650.jpeg" /></p> <p><img src="http://m3.img.srcdd.com/farm4/d/2014/1020/15/390F43577E8994667B8CA1C178F90730_B1280_1280_650_650.jpeg" /></p> </div> <script> var scroll = { info:document.getElementById('info'), //獲得元素的可視高度 容器高度，不包括滾動條和邊框，不傳參數表示瀏覽器窗口的可視高度 getClientHeight:function(_elem){ if(!!_elem){ return _elem.clientHeight; }else{ return window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; } }, //獲得元素的可視高度 容器高度，包括滾動條和邊框，不傳參數表示瀏覽器窗口的可視高度 getOffsetHeight:function(_elem){ if(_elem){ return _elem.offsetHeight; }else{ return document.documentElement.offsetHeight || document.body.offsetHeight; } }, //獲得元素的內容高度，包括顯示的內容和隱藏的內容，不傳參數表示頁面整個文檔的高度 getScrollHeight:function(_elem){ if(_elem){ return _elem.scrollHeight; }else{ return document.documentElement.scrollHeight || document.body.scrollHeight; } }, //獲得元素距離父元素的頂端的距離 getOffsetTop:function(_elem){ return _elem.offsetTop; }, //獲得元素中滾動條縱向滾動的距離，不傳參數表示瀏覽器滾動條的縱向滾動距離 getScrollTop:function(_elem){ if(!!_elem){ return _elem.scrollTop; }else{ return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; } }, //初始化 init:function(){ var that = this; var _offsetTop = that.getOffsetTop(that.info); document.body.addEventListener("mousewheel", function(event) { that.info.className = that.getScrollTop() > _offsetTop ? 'info pos' : 'info'; }); } } scroll.init(); </script> </body> </html>