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

【问题标题】：Prevent Background Scrolling When Displaying Popup显示弹出窗口时防止背景滚动
【发布时间】：2010-02-04 17:53:36
【问题描述】：

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

如何防止背景滚动？

Example here

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

【问题讨论】：

标签： jquery html popup

【解决方案1】：

打开弹窗时隐藏body的滚动条

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

并在关闭弹出窗口时恢复

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

【讨论】：

分配溢出隐藏会导致滚动条消失，从而改变页面宽度。这不会禁用滚动条，但会阻止滚动发生。
我喜欢这个解决方案 :)
您的解决方案有效，但是当您关闭弹出窗口并再次启用它滚动时，它也会提供水平滚动。这不是必需的。

【解决方案2】：

一种选择是在body 上临时将overflow 属性设置为hidden，这将消除滚动条，但在调整页面时会导致轻微闪烁。

另一个选择是点击$(window).scroll() 事件并从那里返回false。这也会导致一些闪烁，因为浏览器对 return false 语句的反应没有那么快。

最好的办法是将点击事件处理程序移动到一个单独的文件并在那里进行绑定：

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

这应该可以防止页面滚动。记得在对话框关闭后移除绑定，否则页面将无法滚动！您可以使用以下方法删除绑定：

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

【讨论】：

谢谢。但是这种解决方案会导致屏幕闪烁吗？此外，pageTracker 是通过在 Wordpress 中设置的自定义字段传递的，并且不容易与 jQuery 交互。
我也有同样的情况。这是一个不错的解决方案，因为它确实在 FF24.0 中锁定了滚动，但它仍然允许使用 end/home/pageup/pagedown 移动页面；此外，它似乎在 IE8 中不起作用。我没有比这两个浏览器进一步测试它，但上面的评论似乎表明这个问题需要一些工作。

【解决方案3】：

不要在链接中使用#标签！

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

编辑您的链接：

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

（注意 href=""）

【讨论】：

绝对要使用井号标签，并且在任何情况下都不要使用内联 JavaScript。为了防止浏览器重定向到#，您可以在处理函数的末尾使用return false;。 crisp.tweakblogs.net/blog/313/…
抱歉，Rogier，这并没有解决问题。它还使页面重新加载，从而关闭弹出窗口。不过谢谢！
是的，你当然还是要使用 return false ！但这确实是基本的 JS ;) <a href="" onclick="javascript: pageTracker._trackPageview('/onclick/emailquote');return false;" class="emailPost">Email this quote</a> 可以正常工作。
“javascript:void(0);”怎么样？
href 中的任何内容都无关紧要，因为“return false”会阻止浏览器转到该地址。请记住，除了最低限度之外的任何东西都在浪费带宽——显然，一些低流量网站并不关心这些东西。

【解决方案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');
});

【讨论】：

刚刚遇到这个 iOS 问题，但遗憾的是这个解决方案似乎不适用于 iOS 11.x/JQuery Mobile 1.45

【解决方案5】：

如果你这样使用它

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

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

您可以使用href="" 并将其替换为data-mfp-src=""。它运行良好。

【讨论】：

我不明白这是如何回答这个问题的。这应该是对另一个答案的评论吗？