工作遇到的需求，弹层弹出时需要禁止页面滚动。
查了下网上最好的方法是给 body 加 height: 100%; overflow: hidden; ，加上发现没有生效，又发现需要加 position: fixed; ，加上后确实可以禁止滚动，但是页面会回到页首。
然后就想着禁止后滚到禁止前滚动到的位置，但是页面滚动 IE、新版chrome 和 火狐 是 document.documentElement.scrollTop 生效，而不是 body.scrollTop 生效，body高已经为屏幕高了，html不能滚动。然后就把 height: 100%; overflow: hidden; 加到了 html 上，就可以设置 scrollTop 了，测试最起码可以兼容到IE7。
但是 老版本chrome 是 body.scrollTop 滚动页面，所以我就加了个 #container 的最外层的盒子来承担这个实现页面滚动的任务，以确保所有的浏览器都可以完美的兼容。
优点：
至少可以兼容到ie7，pc、移动、响应式页面都可以用，弹层内容可以滚动，js逻辑较少。
缺点：
需要考虑布局，不需要满足上述所有需求的可以换更简单的方法。
希望对有需要的同学会有所帮助。
html 代码
评论 (8 )
最新评论
我之前也写来着，着急用所以用的插件，也就没有接着写。
这个是我以前写的。当时是用来自定义滚动条的。callback会返回当前滚轮滚动方向，然后可以自己决定滚动一下滚动多少距离和定义滚动动画。
你这个元素内滚动到底部后禁止父级或页面滚动非常好用
好吧。只能说我有强迫症
我觉得布局也不怎么需要考虑，原有的页面后期最外层加个盒子也不会有什么影响，我的需求是弹层也有内容需要滚动，并且是移动页面。
禁止滚动时没有滚动条的问题可以在禁止时给body加个overflow-y: scroll;
这样把滚动条也给影响了。而且还要考虑布局。有些情况下不好用。
给你看看我这个，禁止鼠标滚轮，但不禁止鼠标拖动滚动条。
html 代码
安卓没问题，iOS估计也可以，你可以打开看看，我没有苹果手机
移动端好用吗安卓和ios的