JavaScript實作擷取網頁滾動距離

1.先搭架子：

* {
            margin: 0;
            padding: 0;
        }
        
        p {
            line-height: 50px;
            width: 200%;
        }
           

<p>我是正文1</p>
    <p>我是正文2</p>
    <p>我是正文3</p>
    <p>我是正文4</p>
    <p>我是正文5</p>
    <p>我是正文6</p>
    <p>我是正文7</p>
    <p>我是正文8</p>
    <p>我是正文9</p>
    <p>我是正文10</p>
    <p>我是正文11</p>
    <p>我是正文12</p>
    <p>我是正文13</p>
    <p>我是正文14</p>
    <p>我是正文15</p>
    <p>我是正文16</p>
    <p>我是正文17</p>
    <p>我是正文18</p>
    <p>我是正文19</p>
    <p>我是正文20</p>
    <p>我是正文21</p>
    <p>我是正文22</p>
    <p>我是正文23</p>
    <p>我是正文24</p>
    <p>我是正文25</p>
    <p>我是正文26</p>
    <p>我是正文27</p>
    <p>我是正文28</p>
    <p>我是正文29</p>
    <p>我是正文30</p>
    <p>我是正文31</p>
    <p>我是正文32</p>
    <p>我是正文33</p>
    <p>我是正文34</p>
    <p>我是正文35</p>
    <p>我是正文36</p>
    <p>我是正文37</p>
    <p>我是正文38</p>
    <p>我是正文39</p>
    <p>我是正文40</p>
    <p>我是正文41</p>
    <p>我是正文42</p>
    <p>我是正文43</p>
    <p>我是正文44</p>
    <p>我是正文45</p>
    <p>我是正文46</p>
    <p>我是正文47</p>
    <p>我是正文48</p>
    <p>我是正文49</p>
    <p>我是正文50</p>
           

2.編寫邏輯部分：

window.onscroll = function() {
            //1.IE9及其以上 
            // console.log(window.pageXOffset);
            // console.log(window.pageYOffset);

            // 2.标準模式下浏覽器
            // console.log(document.documentElement.scrollTop);
            // console.log(document.documentElement.scrollLeft);

            // 3.混雜(怪異)模式下浏覽器
            // console.log(document.body.scrollTop);
            // console.log(document.body.scrollLeft);

            //封裝
            let {
                x,
                y
            } = getPageScroll();
            console.log(x, y);

            function getPageScroll() {
                let x, y;
                if (window.pageXOffset) { //IE9及其以上
                    x = window.pageXOffset;
                    y = window.pageYOffset;
                } else if (document.compatMode === "BackCompat") { //混雜模式下   
                    x = document.body.scrollLeft;
                    y = document.body.scrollTop;
                } else { //标準模式下 
                    x = document.documentElement.scrollLeft;
                    y = document.documentElement.scrollTop;
                }
                return {
                    x: x,
                    y: y
                }
            }
        };