判断页面滚动方向
判断页面滚动方向，需要使用window.scrollY这个属性
思路：
- 先保存当前页面超出可视区域的高度 a
- 给 window 添加滚动事件，让滚动后的超出可视区域距离和上一次的距离 a 进行对比
- 如果滚动后的超出距离大于上一次的超出距离，表示页面在向上滚动，否则页面在向下滚动
- 判断后，更新变量 a 的值，便于下次滚动后的比较
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<style>
body {
height: 1000px;
}
div {
position: fixed;
top: 0;
left: 0;
}
</style>
<div></div>
<script>
var scrollTop = 0;
var div = document.querySelector("div");
window.onscroll = function() {
if (window.scrollY > scrollTop) {
div.textContent = "页面向上滚动";
} else {
div.textContent = "页面向下滚动";
}
scrollTop = window.scrollY;
};
</script>
|
案例源码
浏览器窗口的滚动事件
如果页面刷新前，window.scrollY 值不等于 0，页面刷新后，浏览器会自动跳转到刷新前的滚动距离，如果需要在每次刷新后自动执行scroll事件中的函数，必须把 window.onscroll 事件放在全局作用于下，看一下下面的案例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<style>
body {
height: 1000px;
margin: 0;
}
div {
position: fixed;
top: 0;
left: 0;
background-color: bisque;
}
</style>
<img src="http://pic1.win4000.com/wallpaper/2/58006dda3bf0f.jpg" alt="" />
<div>
<p class="p1"></p>
<p class="p2"></p>
</div>
<script>
var p1 = document.querySelector(".p1");
var p2 = document.querySelector(".p2");
window.addEventListener("scroll", function() {
p1.textContent = "刷新后，我会自动更新当前时间为：" + new Date();
});
window.addEventListener("load", function() {
window.addEventListener("scroll", function() {
p2.textContent = "页面滚动时，我的内容才会出现";
});
});
</script>
|
案例源码
案例中，在不同位置给window添加了不同的scroll事件，提前让页面拉到最底部，并刷新页面，会发现只有p1的内容出现了，滚动页面时，p2的内容才出现。
这两个scroll事件，一个放在window.onload外，我们称为 event1，另一个在window.onload之内，叫做event2;
为什么页面刷新后，event2 没有自动执行？这是因为window.onscroll会在页面刷新后立即执行，此时页面资源可能还未加载完成(如果页面需要的资源比较多)，等到加载完成才给 window 添加的 event2 事件，肯定要等页面再次滚动后，才会执行。
当然了，如果页面内没有什么大量资源，load 事件在浏览器刷新后自动执行的 scroll 事件之前发生，event1和event2就有可能会同时出现，比如把上面案例中的图片资源取消掉，把页面拉到底，再重新刷新页面时event1和event2就都会自动执行了
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<style>
body {
height: 1000px;
margin: 0;
}
div {
position: fixed;
top: 0;
left: 0;
background-color: bisque;
}
</style>
<div>
<p class="p1"></p>
<p class="p2"></p>
</div>
<script>
var p1 = document.querySelector(".p1");
var p2 = document.querySelector(".p2");
window.addEventListener("scroll", function() {
p1.textContent = "刷新后，我会自动更新当前时间为：" + new Date();
});
window.addEventListener("load", function() {
window.addEventListener("scroll", function() {
p2.textContent = "页面滚动时，我的内容才会出现";
});
});
</script>
|
案例源码