了解如何与滚动互动，对滚动事件作出反应并对其进行控制
滚动页面以查看折叠下方的内容可能是页面上最常见的事件，比点击或键盘事件还要多。
你可以监听window 对象上的scroll 事件，以获得用户每次滚动页面时的信息。
window.addEventListener('scroll', event => {
// scroll event detected
})
在事件处理程序中，你可以通过检查window 属性window.scrollY 来检查当前的垂直滚动位置，并使用window.scrollX 来检查水平滚动。
window.addEventListener('scroll', event => {
console.log(window.scrollY)
console.log(window.scrollX)
})
请记住，scroll 事件不是一次性的。
它在滚动过程中会多次触发，而不仅仅是在滚动结束或开始时，所以如果你需要做任何形式的操作，就会出现问题。
你不应该直接在handler事件处理程序中做任何计算或操作，我们应该使用节流来代替。
节流
scroll 事件不是在每个事件中一次性触发的，而是在所有动作的持续时间内连续调用其事件处理函数。
这是因为它提供了坐标，所以你可以跟踪正在发生的事情。
如果你在事件处理程序中执行复杂的操作，你会影响性能，并导致你的网站用户体验迟缓。
像Lodash这样提供节流功能的库在100多行代码中实现它，以处理每一种可能的使用情况。一个简单易懂的实现是这样的，它使用setTimeout来缓存每100ms的滚动事件。
let cached = null
window.addEventListener('scroll', event => {
if (!cached) {
setTimeout(() => {
//you can access the original event at `cached`
cached = null
}, 100)
}
cached = event
})
缓冲也适用于我们在鼠标事件课上看到的
mousemove事件。同样的事情--当你移动鼠标时，该事件被多次触发。
这里是Codepen上的一个例子。
请看Flavio Copes (@flaviocopes)在CodePen上的笔滚动事件。
当你在浏览器中构建用户界面时，你可能会有一个可以滚动的元素，而了解它当前的水平和垂直滚动是一种常见的需求。
你怎么能做到这一点呢？
一旦你有了这个元素，你可以检查它的scrollLeft 和scrollTop 属性。
0, 0 的位置总是在左上角，所以任何滚动都是相对于它的。
例子。
const container = document.querySelector('. container')
container.scrollTop
container.scrollLeft
这些属性是读/写的，所以你也可以设置滚动位置。
const container = document.querySelector('. container')
container.scrollTop = 1000
container.scrollLeft = 1000
