webapp中的局部滚动怎么实现？

Question

【目标】：
在html5页面中，用定位position:fixed做一个弹层div.layout,当div.layout显示时，它下面的所有内容都不能滚动，但.layout中的内容可以滚动。

几个月前就在项目中做过这个需求，网上查了很多办法，其中说的最多的有：
1.用overflow: hidden;
//实践证明，这个只是在PC中好使，在移动端浏览器中完全不起作用。
2.用e.preventDefault();
//实践证明，这个方法会令页面内所有元素都不滚动。

后来，我发现tmall移动端弹层时，同样会出现背景内容跟随移动的问题，当下判断这可能是html5在移动端的一个缺陷……直到最近，我用手机访问了zara官网:http://m.zara.cn/cn/（移动浏览器或PC Chrome的模拟器中直接输入zara.cn就可以）

没错，这个网站完美解决了我的需求！！！

那么【问题】来了：
它是怎么实现的呢？
求大神们指点！

Answer 1

要实现局部滚动，一般都是用iScroll等插件，用javascript来模拟滚动

Answer 2

最近也被这个问题给困扰，用了许多方法（其中就有什么voerflow：hidden）但是完全没有用！最后老老实实的用上了一个牛逼的插件：iScroll~然后开开心心的解决了

Answer 3

试过阻止事件冒泡么？这里有个相同的问题

Answer 4

谢谢各位的回复。之前知道有这么个插件，但一直以为只是调滚动条样式用的，看到大家推荐，决定试用了一下iScroll，果然好用！完全达到想要的效果！