jQuery 原始碼決議(二十八) 樣式操作模塊 scrollLeft和scrollTop詳解-有解無憂

scrollLeft和scrollTop用于獲取/設定滾動條的，如下:

scrollLeft(val)　　;讀取或設定整個頁面的水平滾動條距離
scrollTop(val)　　;讀取或設定整個頁面的垂直滾動條距離

如果沒有傳入val值則獲取滾動條距離，如果有設定val則標識設定滾動條距離，還是舉個栗子，以scrollTop為例，如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js"></script>
    <style>
        *{margin:0;padding:0;}
        button{margin:1px 0;}
        div{margin:20px;width: 200px;height: 180px;position: relative;padding-top: 20px;background: #c38;}
        h1{margin:10px;color: #333;}
    </style>
</head>
<body>
    <br/>
    <p id="result">結果:<span></span></p>
    <button id="b1">獲取垂直滾動條距離</button><br/>
    <button id="b2">回到首頁</button>
    <br/><br/>
    <script>
        $('#b1').click(()=>{                        //獲取滾動條距離
            $('span').text( $(window).scrollTop() )
        })
        $('#b2').click(()=>{                        //設定垂直滾動條滾動到頂部
            $(window).scrollTop(0)
        })
        //這里先新增一個檔案碎片，然后添加50個p標簽，最后添加到body子節點的最前面，以模擬滾動條
        {
            let i=1,fragments=document.createDocumentFragment()
            while(i<=50){
                let p = document.createElement('p');
                p.innerHTML = i++;
                fragments.append(p)
            }
            document.body.insertBefore(fragments,document.body.childNodes[0])
        }
    </script>    
</body>
</html>

當我們點擊按鈕1時將獲取當前垂直滾動條的距離，并將結果添加到span里面，點擊按鈕2會設定垂直滾動條，讓它滾動到頂部，效果如下:

writer by:大沙漠 QQ:22969969

很多網站右下角有一個滾動到頂部就可以用這個來實作，完美兼容所有網站，這個得感謝完美jQuery的兼容性，

原始碼分析

代碼實作如下

jQuery.each( ["Left", "Top"], function( i, name ) {    //在jQuery.fn加上.scrollLeft()和.scrollTop()方法     對于scrollLeft來說，i為0，對于scrollTop來說，i為1
    var method = "scroll" + name;

    jQuery.fn[ method ] = function( val ) {                //掛在實體上面
        var elem, win;

        if ( val === undefined ) {                        //如果沒有傳入val引數
            elem = this[ 0 ];

            if ( !elem ) {                                //如果沒有匹配元素
                return null;                                //則回傳null
            }

            win = getWindow( elem );                    //獲取window物件，如果引數elem是window物件，則回傳window物件，否則回傳false

            // Return the scroll offset
            return win ? ("pageXOffset" in win) ? win[ i ? "pageYOffset" : "pageXOffset" ] :
                jQuery.support.boxModel && win.document.documentElement[ method ] ||
                    win.document.body[ method ] :
                elem[ method ];                            //用于讀取window物件、document物件、元素的滾動偏移
        }
        //執行到這里，則表示是設定滾動了
        // Set the scroll offset
        return this.each(function() {                    //遍歷匹配元素，設定每個元素的滾動偏移
            win = getWindow( this );

            if ( win ) {                                //如果是window物件，則呼叫scrollTo()滾動到執行的位置，該方法兩個引數都是必須的，
                win.scrollTo(
                    !i ? val : jQuery( win ).scrollLeft(),    //這兩個引數是必填的
                     i ? val : jQuery( win ).scrollTop()
                );

            } else {
                this[ method ] = val;                    //否則設定元素的scrollLeft、scrollTop屬性，
            }
        });
    };
});

getWindow實作如下:

function getWindow( elem ) {
    return jQuery.isWindow( elem ) ?
        elem :                                         //如果是elem是window物件，則直接回傳elem
        elem.nodeType === 9 ?
            elem.defaultView || elem.parentWindow : //否則如果elem表示整個檔案，則回傳elem.defaultView(即window物件)，否則回傳elem.parentWindow，如果elem.parentWindow不存在則回傳false
            false;
}

從原始碼可以發現，如果是操作滾動條的話，就需要匹配window或documetn物件才可以

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/28083.html

標籤：jQuery

上一篇：$和jquery的關系

下一篇：五星評價