滚动事件

课程目标

学习并实践滚动事件

阅读

• JS 滚轮事件(mousewheel/DOMMouseScroll)了解 (opens new window)
• onscroll 事件 (opens new window)
• MDN 滚动事件 (opens new window)
• 页面滚动 (opens new window)
• 监听页面滚动及滚动到指定位置 (opens new window)
• 滚动实现懒加载 (opens new window)
• 深入理解滚动 scroll (opens new window)

编码一

<p id="showScroll"></p>;
window.addEventListener("scroll", function() {
  //your comlement
});

基于上述 html 编写一个显示当前滚动的小函数，在 id 为showScroll的 p 中显示滚动的像素

编码二

创建一个无限的页面。当访问者滚动到页面末端时，它会自动将当期日期时间附加到文本中（以便访问者可以滚动更多内容）。具体效果如下图所示

• 注意滚动是“弹性的”。在某些浏览器/设备中，我们可以在文档的顶端或末端稍微多滚动出一点（超出部分显示的是空白区域，然后文档将自动“弹回”到正常状态）。
• 注意滚动并不精确。当我们滚动到页面末端时，实际上我们可能距真实的文档末端约 0-50px。因此，“滚动到末端”应该意味着访问者离文档末端的距离不超过 100px。

编码三

基于上一个任务，添加一个快速回到顶部的按钮

• 页面向下滚动的距离没有超过窗口高度时 —— 按钮不可见。
• 当页面向下滚动距离超过窗口高度时 —— 在左上角出现一个“向上”的箭头。如果页面回滚回去，箭头就会消失。
• 单击箭头时，页面将滚动到顶部。

进阶任务

如果你很快就完成上面的任务，可以去 LeetCode 上去多进行一些练习。

提交

把你今天觉得做得最好的代码放在 Github 后进行提交。

总结

依然把今天的学习用时，收获，问题进行记录。