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

Question

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

如何防止背景滚动？

这里有示例

PDF截图右侧的“将此引文发送至电子邮件”链接。

- Joe

Answer 1

在打开弹出窗口时隐藏页面的滚动条

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

并在关闭弹出窗口时恢复回去

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

- sudhAnsu63

---

将overflow:hidden赋值给元素会导致滚动条消失，从而改变页面宽度。这并不会禁用滚动条，但确实防止了滚动发生。 - Thomas

你的解决方案是有效的，但当你关闭弹出窗口并再次启用它时，它也会提供水平滚动条。这是不必要的。 - Sunil Pachlangia

Answer 2

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

另一个选择是利用$(window).scroll()事件，并从其中返回false。这也会导致一些闪烁，因为浏览器对返回false语句反应不够快。

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

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

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

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

- Tatu Ulmanen

---

谢谢。但是这个解决方案会导致屏幕闪烁吗？ 另外，pageTracker是通过在WordPress中设置的自定义字段传递的，并且很难与jQuery进行接口对接。 - Joe

我有同样的情况。这是一个不错的解决方案，因为它确实锁定了FF24.0中的滚动，但仍允许使用end/home/pageup/pagedown移动页面；此外，它似乎在IE8中无法正常工作。我还没有在除这两个浏览器之外的其他浏览器上进行测试，但上面的评论似乎表明这个问题需要一些改进。 - Thomas

Answer 3

这个代码块适用于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');
});

- mkk

---

刚遇到了这个iOS问题，但可悲的是这个解决方案似乎在iOS 11.x / JQuery Mobile 1.45上不起作用。 - Jonny

Answer 4

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

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

将你的链接编辑为：

<a href="" onclick="javascript: pageTracker._trackPageview('/onclick/emailquote');" class="emailPost">发送此引用邮件</a>

（注意 href=""）

- Roger Far

---

一定要使用哈希标签，绝不要在任何情况下使用内联JavaScript。为了防止浏览器重定向到＃，您可以在处理程序函数的末尾使用return false;。http://crisp.tweakblogs.net/blog/313/the-useless-javascript-pseudo-protocol.html - Tatu Ulmanen

抱歉，Rogier，那并没有解决问题。它还会导致页面重新加载，从而关闭弹出窗口。不过还是谢谢！ - Joe

是的，当然你仍需使用 return false！但那真是基础的 JS ;)<a href="" onclick="javascript: pageTracker._trackPageview('/onclick/emailquote');return false;" class="emailPost">将此引语发送电子邮件</a>能够正常工作。 - Roger Far

"javascript:void(0);"是什么意思？ - user216441

无论 href 中包含什么内容，'return false' 都会阻止浏览器跳转到该地址，这是不重要的。请记住，除了“最少量”的内容外，放入任何其他内容都会浪费带宽——一些低流量的网站显然不关心这些事情。 - BryanH

Answer 5

如果你是这样使用它的话

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

(#tragetid) 是弹出层的 div id。

你可以使用并替换 href="" 为 data-mfp-src=""。它完美地工作。

- Rajan Gupta

---

我不明白这个回答如何解决问题。这是要作为对另一个答案的评论吗？ - Artjom B.