今天做项目的时候，做了个显示活动详情的浮层，因为内容比较多所以浮层内需要滚动，然后就引发了一系列的问题
滚动冒泡，导致浮层下的内容页会滚动
这是个亘古不变的问题了，一个项目不遇到的都不舒服，网上探讨这个问题的也非常之多，但经过我多番尝试，都没能完美的解决，其中安卓和 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 的回弹动画入手，等我解决了问题我再回来补充。
