阻止遮罩下跟随滚动（事件冒泡）

今天做项目的时候，做了个显示活动详情的浮层，因为内容比较多所以浮层内需要滚动，然后就引发了一系列的问题

滚动冒泡，导致浮层下的内容页会滚动

这是个亘古不变的问题了，一个项目不遇到的都不舒服，网上探讨这个问题的也非常之多，但经过我多番尝试，都没能完美的解决，其中安卓和 iOS 端的差异最为烦人，话不多说直接解决问题。

固定body

既然没有办法很好的解决冒泡，那就直接斩草除根，从最根源的地方控制它，让他滚不起来。给 body 添加样式(以下讨论都是基于浮层已经出现的情况)：

body.frozen {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    overflow: hidden;
}

把 body 变成一个不能撑开，大小与窗口一致的块，这样就没有东西可以滚动了。这里注意，不能把样式赋给 html ，因为 html 无法设置 overflow-y 。

其实这样，底下的内容已经不会跟着滚了，但问题肯定不会不那么简单，因为还有一个问题

纠正显示位置

添加上面样式后，body 内的内容就会排列，显示回最顶端的内容， 就像滚动条滚回最上面一样，这当然不合理，所以我们要手动纠正。

首先需要将body内的内容包裹起来，姑且叫他 .bodyChild

var freezeScroll = (function ($bodyChild) {
  var scrollTop, // 储存冻结时页面滚动位置
  return {
    freezeStart: function () {
      scrollTop = $(document).scrollTop(); // 获取滚动位置
      $body.addClass('frozen')
      $bodyChild.css('margin-top', -scrollTop + 'px') // 向上便宜
    },
    freezeEnd: function () {
      $body.removeClass('frozen')
      $(document).scrollTop(scrollTop) // 重新赋予滚动高度
      $bodyChild.css('margin-top', '0px')
    }
  }
})( $('.bodyChild') ) // 自执行，传入一个body子元素

原理就是把里面的子元素用负值的 margin-top 偏移上去，模拟滚动条的位置，只要在浮层显示隐藏的方法中调用 freezeScroll 的对应方法就可以瞒天过海拉！

任你浮层怎么滚，底下都纹丝不动！

写到这里，别以为文章就要结束了，其实。。。。

iOS 下的弹性滚动问题

当我满心欢喜解决了滚动冒泡问题后，上真机测试，安卓没毛病丝滑流畅，然而到了 iOS 就 GG 了，遮罩层的滚动效果相当生涩，就是只要当手指抬起，内容就不再滚动了，正常的惯性完全消失。

又是一顿搜索，发现 iOS 默认只会在 body 上添加惯性滚动效果，悬浮层在 body 固定的情况下自然就不会有这个特性咯。那么可以这样来解决：

给拥有滚动条的父元素添加 -webkit-overflow-scroll: touch 样式，立马滚动又变得丝滑流畅啦！

然而这并不是完美的，一般惯性滚动到尽头（最上或最下），会有个回弹的动画，但当悬浮层回弹完并停下来后，手再拉向尽头，悬浮层不再跟随，而是固定在边缘，并且无法再被滚动。

经过我初步的验证和猜测，发现了可能的原因，但是这个又很难描述，总结得简单一点，就是当悬浮层停在最尽头之后，直接拉动尝试触发回弹动画的话，会触发底下 html 的回弹（没错，又回到了冒泡的问题上），而悬浮层并不会动，并且，在底下的回弹动画结束前，悬浮层也不能滚动。

至于这个问题的解决办法，暂时还没研究出来，我想应该还是得从阻止冒泡的方向入手，毕竟我们上面只是固定了 body 而没有真正解决冒泡的问题，另一个方面可以从展示屏蔽 html 的回弹动画入手，等我解决了问题我再回来补充。