网页弹出对话框的背景层禁止滚动，哪种方式最优？
目前能想到的有
1.阻止所有能导致页面滚动的事件。 //scroll不能阻止，只能阻止mousewheel，鼠标拽滚动条就悲剧了
2.body overflow:hidden //win下右侧滚动条会消失导致页面横移
3.把滚动部分单独放在一个div里，和弹出部分同级，body和window同高。 //所有涉及offset/scrollTop的方法都要修改。
4.弹出时算scrollTop，给内容区fix然后top移动到目前位置，同时body给一个overflow-y:scroll强撑出滚动条。
大家有没有更好的方法？
写回答
-
IT从业个人感觉第二种最好，而且 twitter 、QQ 空间、fancybox 插件等都采用的这种方法。JS 越简单越好。至于遇到的内容偏移的问题，解决方法就是获取当前浏览器下滚动条宽度，然后再进行赋值。
从 fancybox 插件中提取出来的检测方法大体如下：
w1 = $(window).width();
H.addClass('fancybox-lock-test');
w2 = $(window).width();
H.removeClass('fancybox-lock-test');
$("").appendTo("head");检测添加类的目的就是取消滚动条，显然是下面这样
.fancybox-lock-test { overflow-y: hidden !important; }更详细的分析，自荐一篇文章 再谈弹窗那些事
2019-07-17 19:38:27赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
