13 图片随屏幕滚动而滑入滑出的效果指南

    页面中的文章有几张配图，随着页面上下滚动，图片位置划过图片一半时，图片从两侧滑入；图片位置离开可见区域时，图片向两侧滑出。

    下图中蓝色方框位置即是图片所占位置，初始文档中已经写好了内容及样式，需要完成控制图片显示部分的代码来实现图片滑动的效果。

    • 来控制左右移动

    涉及页面尺寸的属性：

    • window.scrollY 文档从顶部开始滚动过的像素值
    • 部分的高度
    • ele.height 元素的高度
    • ele.offsetTop 当前元素顶部相对于其 offsetParent 元素的顶部的距离。

    的作用：
    降低事件监听的频率，使用了 Lodash 中的 debounce 方法。

    1. 获取页面中的所有图片元素
    2. 尺寸获取及处理
    3. 滚动至指定区域的条件判断
    1. 获取所有涉及到的图片

    2. 针对页面的滚动事件进行监听，可以先打出事件对象来看看。同时在接下来的调试过程中也能利用这打出各个尺寸的值，来帮助我们感受每个尺寸的含义。
      此外由于每次滚动都触发监听事件，会降低 JavaScript 运行性能，所以用 debounce 函数来降低触发的次数。

    3. 针对每次监听到的滚动事件，遍历所有图片元素，判断是否显示或隐藏图片。由于图片的显示控制只需通过增减 .active 类，此处的重点在于判断的条件如何确认，为便于形象地感受页面滚动时，各个尺寸的变化，我画了一张示意图，如下：
      尺寸示意图
      其中部分指可滚动页面整体，部分是指会随着页面滚动而变化的尺寸，黑色标注的尺寸是固定不变的。
      页面的滑动过程经过了两个临界点，一个是下滑到图片的一半处，另一个是完全滑过图片使图片已不再视窗之内，分别决定了图片的显示和隐藏。 需要利用两个临界点来判断图片是否处在需要显示的区域内，故利用两个值来存取此条件的结果（以保证每次事件监听的结果赋值给常亮后，不会随 的属性值变化）。