Javascript中與Scroll有關的方法

這塊確實太亂了，被兼容搞的簡直快要暈死，默默地總結下...

與scroll相關的方法

4個window對象下：scrollX、scrollY、scrollTo、scroll（作用和scrollTo一樣）

4個Element對象下：scrollWidth、scrollHeight、scrollLeft、scrollTop

 

window對象下(BOM)

window.scrollX、window.scrollY

var x = window.scrollX;  // 以像素為單位，返回水平軸上document已經被卷去的寬度   number類型
var y = window.scrollY;  // 以像素為單位，返回垂直方向上document被卷曲的高度     number類型

pageYOffset 屬性是 scrollY 屬性的別名，pageXOffset同理，為了跨瀏覽器兼容，一般用后者（pageYOffset、pageXOffset）。

另外舊版本（<9）對這兩個屬性都不支持，應該選用非標准的屬性。

兼容性代碼如下：（獲取頁面垂直和水平的滾動距離！）（復雜版）

var supportPageOffset = window.pageXOffset !== undefined;  // 判斷是否支持pageXOffset
var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");  // 判斷渲染模式是不是標准模式
/**  
*  如果支持pageXOffset,直接用window.pageXOffset. 如不支持，判斷渲染模式
*  如果是標准模式，用document.documentElement.scrollLeft,
*  如果是混雜模式，用document.body.scrollTop.
**/
var x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;
var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;

 

window.scrollTo( x-coord, y-coord ) ：

MDN API原文：（以左上角為坐標原點，以像素為單位沿水平和垂直方向滾動到指定位置）

x-coord is the pixel along the horizontal axis of the document that you want displayed in the upper left.

y-coord is the pixel along the vertical axis of the document that you want displayed in the upper left.

不需要做兼容，可以直接用

window.scroll( x-coord, y-coord ): 作用同 window.scrollTo()

 

Element對象下(DOM)：

scrollWidth:只讀屬性，返回該元素內容區域寬度和自身寬度中較大的一個，若自身寬度大於內容寬度（存在滾動條），則scrollWidth>clientWidth.

注意：該屬性返回的是四舍五入后的整數值，如果需要小數，請用：Element.getBoundingClientRect().

var xScrollWidth = element.scrollWidth;

 

scrollHeight：只讀屬性，返回該元素內容高度。包含被overflow隱藏掉的部分。包含padding，不包含margin.如果需要小數，請用：Element.getBoundingClientRect().

var yScrollHeight = element.scrollHeight;

應用點：（判斷元素是否滾動到底部，底下等式若返回 true ，則是，否則不是）

element.scrollHeight - element.scrollTop === element.clientHeight;

 

scrollLeft：讀取或設置元素滾動條到元素左邊的距離。

//獲取滾動條到元素左邊的距離
var sLeft = element.scrollLeft;

//設置滾動條滾動了多少像素
element.scrollLeft = 10;

 

scrollTop：設置或獲取該元素頂部距離其容器頂部的距離，無滾動條時為0。

//獲取滾動的高度（被卷去的高度）
var intElementScrollTop = element.scrollTop;

// 設置滾動的距離
element.scrollTop = intValue;

兼容性代碼如下：（獲取、設置頁面垂直方向的滾動距離！水平方向同理）（簡易版）

//獲取滾輪滾動的距離,適配所有的瀏覽器
function getScrollY(){
    return window.pageYOffset || document.documentElement.scrollTop;
}
//設置垂直方向滾輪滾動的距離,適配所有的瀏覽器，num為滾動距離
function setScrollY(num){
    document.body.scrollTop = document.documentElement.scrollTop = num;
}

 

總結：

　　由上面的兩個兼容代碼可以看出，我們總是把window下的scrollY(pageYoffset)、scrollX(pageXoffset)方法和element下的scrollTop、scrollLeft方法混在一起用，其實這兩個是有本質區別的。一個獲取的是window窗口的滾動距離，一個獲取的是某一個元素的滾動距離，當獲取的元素是body時，window.scrollY(window.pageYoffset) = document.body.scrollTop。

 

擴展：關於獲取各種瀏覽器可見窗口大小的一點點研究

<script>
    function getInfo()
    　　{
            var s = "";
            s += " 網頁可見區域寬："+ document.body.clientWidth;
            s += " 網頁可見區域高："+ document.body.clientHeight;
            s += " 網頁可見區域寬："+ document.body.offsetWidth + " (包括邊線和滾動條的寬)";
            s += " 網頁可見區域高："+ document.body.offsetHeight + " (包括邊線的寬)";
            s += " 網頁正文全文寬："+ document.body.scrollWidth;
            s += " 網頁正文全文高："+ document.body.scrollHeight;
            s += " 網頁被卷去的高(ff)："+ document.body.scrollTop;
            s += " 網頁被卷去的高(ie)："+ document.documentElement.scrollTop;
            s += " 網頁被卷去的左："+ document.body.scrollLeft;
            s += " 網頁正文部分上："+ window.screenTop;
            s += " 網頁正文部分左："+ window.screenLeft;
            s += " 屏幕分辨率的高："+ window.screen.height;
            s += " 屏幕分辨率的寬："+ window.screen.width;
            s += " 屏幕可用工作區高度："+ window.screen.availHeight;
            s += " 屏幕可用工作區寬度："+ window.screen.availWidth;
            s += " 你的屏幕設置是 "+ window.screen.colorDepth +" 位彩色";
            s += " 你的屏幕設置 "+ window.screen.deviceXDPI +" 像素/英寸";
    　　}
</script>

 

擴展：准確獲取網頁客戶區的寬高、滾動條寬高、滾動條Left和Top的代碼：

<script>
    var cWidth = cHeight = sWidth = sHeight = sLeft = sTop = 0;
    
    if (document.compatMode == “BackCompat”) {
       cWidth = document.body.clientWidth;
       cHeight = document.body.clientHeight;
       sWidth = document.body.scrollWidth;
       sHeight = document.body.scrollHeight;
       sLeft = document.body.scrollLeft;
       sTop = document.body.scrollTop;
    }
    else { //document.compatMode == “CSS1Compat”
       cWidth = document.documentElement.clientWidth;
       cHeight = document.documentElement.clientHeight;
       sWidth = document.documentElement.scrollWidth;
       sHeight = document.documentElement.scrollHeight;
       sLeft = document.documentElement.scrollLeft == 0 ? document.body.scrollLeft : document.documentElement.scrollLeft;
       sTop = document.documentElement.scrollTop == 0 ? document.body.scrollTop : document.documentElement.scrollTop;
    }
</script>

 

博客地址：offset[Parent/Width/Height/Top/Left] 、 client[Width/Height/Top/Left] 、 Element.getBoundingClientRect()

參考鏈接：

http://www.css88.com/archives/1767

http://www.css88.com/archives/90

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollTop