求问一个滚动时的JavaScript效果如何实现

Question

以前看到的，应该是小米某个产品的页面，也可能是其他品牌手机页面，但是我找了很久都没找到。
具体效果是，当向下滚动鼠标滚轮时，本来只是正常页面滚动，到一个地方再向下滚动时，视觉上的效果是图片横向滚动，但是右侧滚动条还是向下滚。更神奇的是，如果向上滚，图片横向滚动效果还会回退。也就是说，页面上的动画和滚动是一一对应的，滚动停止，动画也会停止，向回滚动，动画也会向前播放。美团外卖的商品列表页面也有这个效果。请问这个效果是怎么实现的？我想出的办法是，算出滚动距离和动画参数的关系，比如从0滚动到200，盒子宽度最终为400，那么把盒子宽度设置为scrollTop*2，然后监听滚动事件。是这样的吗

另外那个页面还有一个地方不知道是怎么实现的。向下滚动到了一个地方后，一样也是由正常滚动效果变为其他效果，但是滚动速度突然变得非常缓慢，过了这段以后，滚动速度又恢复正常，这是怎么做到的？为什么不是匀速的？

另求那个页面

Answer 1

既然有想法了，为什么没有去尝试一下呢？

另外这种视差式的滚动基本由监听和页面滚动的距离来设置某一块的动画效果而组成。你也可以看成当你触发某一个事件的时候js通过不停的改变页面的视觉而形成的。good luck!