滚动穿透在移动端开发中是一个很常见的问题，产生诡异的交互行为，影响用户体验，同时也让我们的产品看起来不那么“专业”。虽然不少产品选择容忍了这样的行为，但是作为追求极致的工程师，应该去了解为什么会产生以及如何去解决。

什么是滚动穿透

移动端开发中避免不了会在页面上进行弹窗、加浮层等这种操作。一个最常见的场景就是整个页面上有一个遮罩层，上面画着各种各样的东西，具体是什么就不讨论。实现这样一个遮罩层可难不住即使是一个刚开始写前端的小白。但是这里有一个问题就是如果不对遮罩层做任何处理，当用户在上面滑动时会发现遮罩层下方的页面居然也在滚动，这就很 interesting 了。就如下面的例子，一个名为mask长宽都是屏幕大小的遮罩层，我们在上面滑动时，下面的内容也在跟随滚动，即滚动“穿透”到了下方，这就是滚动穿透（scroll-chaining）。

上方 demo 的遮罩层底部是一个逐渐变蓝的内容容器，但是滑动上面遮罩层时，底部也跟随滚动了，这只是一个最简单的场景，后面我们会讨论更复杂的情况。

在之前的浅谈 Flux 架构及 Redux 实践一文中我们初步的谈及了 Redux 的数据流思想，并做了一个简单的加减器。但是还没有接触到 Redux 更多常用的场景，异步操作、API 调用，如何连接到 UI 层等，Redux 可以与很多框架搭配包括 Vue、React 甚至是纯 JavaScript。后面我们会用一个实例–通过 github API 获取个人信息，来将 Redux middleware、async action、连接到 React 贯穿其中。先看看我们最后写的 demo 的样子。