开发者社区> 问答> 正文

网页弹出对话框的背景层禁止滚动,哪种方式最优?

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

大家有没有更好的方法?

展开
收起
杨冬芳 2016-06-14 18:06:53 2821 0
1 条回答
写回答
取消 提交回答
  • 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
    赞同 展开评论 打赏
问答地址:
问答排行榜
最热
最新

相关电子书

更多
动态、高效,蚂蚁动态卡片的内核逻辑 立即下载
《用管控策略设定多账号组织全局访问边界》 立即下载
4个迭代,从批量交...1573957773.pdf 立即下载