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