javascript - 网页弹出对话框的背景层禁止滚动，哪种方式最优？

Question

目前能想到的有

1. 阻止所有能导致页面滚动的事件。 //scroll不能阻止，只能阻止mousewheel，鼠标拽滚动条就悲剧了
2. body overflow:hidden //win下右侧滚动条会消失导致页面横移
3. 把滚动部分单独放在一个p里，和弹出部分同级，body和window同高。 //所有涉及offset/scrollTop的方法都要修改。
4. 弹出时算scrollTop，给内容区fix然后top移动到目前位置，同时body给一个overflow-y:scroll强撑出滚动条。

大家有没有更好的方法？

Answer 1

个人感觉第二种最好，而且 twitter 、QQ 空间、fancybox 插件等都采用的这种方法。JS 越简单越好。至于遇到的内容偏移的问题，解决方法就是获取当前浏览器下滚动条宽度，然后再进行赋值。

从 fancybox 插件中提取出来的检测方法大体如下：

<code class="lang-javascript">w1 = $(window).width();
H.addClass('fancybox-lock-test');
w2 = $(window).width();
H.removeClass('fancybox-lock-test');
$("<style type='text/css'>.fancybox-margin{margin-right:" + (w2 - w1) + "px;}</style>").appendTo("head");
</code>

检测添加类的目的就是取消滚动条，显然是下面这样

<code>.fancybox-lock-test {
    overflow-y: hidden !important;
}
</code>

更详细的分析，自荐一篇文章 再谈弹窗那些事