目前能想到的有
1.阻止所有能导致页面滚动的事件。 //scroll不能阻止,只能阻止mousewheel,鼠标拽滚动条就悲剧了
2.body overflow:hidden //win下右侧滚动条会消失导致页面横移
3.把滚动部分单独放在一个div里,和弹出部分同级,body和window同高。 //所有涉及offset/scrollTop的方法都要修改。
4.弹出时算scrollTop,给内容区fix然后top移动到目前位置,同时body给一个overflow-y:scroll强撑出滚动条。
大家有没有更好的方法?
个人感觉第二种最好,而且 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;
}
更详细的分析,自荐一篇文章 再谈弹窗那些事
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。