显示弹出窗口时防止背景滚动

Question

我有一个在弹出窗口中显示的表单。加载后，背景变灰，但用户仍然可以上下滚动背景内容。

如何防止背景滚动？

示例在这里

pdf 屏幕截图右侧的“通过电子邮件发送此报价”链接。

Answer 1

打开弹出窗口时隐藏正文的滚动条

document.body.style.overflow = "hidden";

并在关闭弹出窗口时恢复

document.body.style.overflow = "visible";

Answer 2

一种选择是暂时将

overflow

上的

hidden

属性设置为

body

，这样可以消除滚动条，但在调整页面时会导致轻微闪烁。

另一种选择是点击

$(window).scroll()

事件并从那里返回 false。这也会导致一点闪烁，因为浏览器对 return false 语句的反应不那么快。

最好的选择是将点击事件处理程序移至单独的文件并在那里进行绑定：

$(function() {
    $('.emailPost').click(function() {
        $(window).scroll(function() { return false; });
        pageTracker._trackPageview('/onclick/emailquote');            
    });
});

这应该会阻止页面滚动。请记住在对话框关闭后删除绑定，否则页面将不再可滚动！您可以使用以下方法删除绑定：

$(window).unbind('scroll');

Answer 3

请勿在链接中使用#标签！

它会尝试滚动到锚点#，但因为它是空的，所以它会滚动到页面顶部。

编辑您的链接：

<a href="" onclick="javascript: pageTracker._trackPageview('/onclick/emailquote');" class="emailPost">Email this quote</a>

（注意 href=""）

Answer 4

此代码块适用于滚动问题非常常见的 iOS 移动设备。

$('body').on('touchmove', function(e) {
    if ($('.scroll-disable').has($(e.target)).length) e.preventDefault();
});
$('body').on('shown.bs.modal', function() {
    $(this).addClass('scroll-disable');
});
$('body').on('hidden.bs.modal', function() {
    $(this).removeClass('scroll-disable');
});

Answer 5

overflow: hidden

解决方案的问题在于它会导致页面闪烁，因为当滚动条消失时页面宽度会发生变化。一个办法？显示弹出窗口时修复文档宽度：

document.body.style.width = document.body.clientWidth + 'px';

参见这个fiddle或gist。

_{我还包括我的已删除的代码审查问题。它可能不必要地复杂，尤其是现在（我在 2010 年代的某个地方编写了代码）。但它可能包含您可能遇到的其他问题的解决方案。虽然目前我还没有看到。}

Answer 6

如果你是这样使用的

<a href="#targetid">Open Model</a> 

(#tragetid) 是 div 弹出窗口 id。

您可以使用

href=""

并将其替换为

data-mfp-src=""

。它工作得很好。