jQuery 显示弹出窗口时防止背景滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2201932/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Prevent Background Scrolling When Displaying Popup
提问by Joe
I have a form that is displayed in a popup. After loading, the background is grayed out, but the user can still scroll the background content up and down.
我有一个显示在弹出窗口中的表单。加载后，背景变灰，但用户仍然可以上下滚动背景内容。
How do I prevent the background from scrolling?
如何防止背景滚动？
the 'email this quote' link to the right of the pdf screenshot.
pdf 屏幕截图右侧的“通过电子邮件发送此报价”链接。
采纳答案by Tatu Ulmanen
One option is to temporarily set the overflowproperty to hiddenon body, that will get rid of the scroll bars but causes a small flicker when the page is adjusted.
一种选择是将overflow属性临时设置为hiddenon body，这将消除滚动条，但在调整页面时会导致小闪烁。
The other choice is to tap onto the $(window).scroll()event and return false from there. That will also cause a bit of flicker as the browser doesn't react that fast to the return false statement.
另一种选择是点击$(window).scroll()事件并从那里返回 false。这也会导致一些闪烁，因为浏览器不会对 return false 语句做出那么快的反应。
Your best bet is to move your click event handlers to a separate file and do the binding there:
最好的办法是将您的点击事件处理程序移动到一个单独的文件并在那里进行绑定：
$(function() {
$('.emailPost').click(function() {
$(window).scroll(function() { return false; });
pageTracker._trackPageview('/onclick/emailquote');
});
});
That should prevent a page from scrolling. Remember to remove the bind after the dialog closes, otherwise the page won't be scrollable anymore! You can remove binds using:
这应该可以防止页面滚动。记得在对话框关闭后移除绑定，否则页面将无法滚动！您可以使用以下方法删除绑定：
$(window).unbind('scroll');
回答by sudhAnsu63
To hide the scrollbar of the body when opening the popup
打开弹出窗口时隐藏正文的滚动条
document.body.style.overflow = "hidden";
and to revert back when closing the popup
并在关闭弹出窗口时恢复
document.body.style.overflow = "visible";
回答by Roger Far
Don't use the # tag in your links!
不要在链接中使用# 标签！
It will try to to scroll to the anchor # but because it's empty it will scroll to the top of the page.
它将尝试滚动到锚点 # 但因为它是空的，它将滚动到页面顶部。
Edit your links to:
编辑您的链接到：
<a href="" onclick="javascript: pageTracker._trackPageview('/onclick/emailquote');" class="emailPost">Email this quote</a>
<a href="" onclick="javascript: pageTracker._trackPageview('/onclick/emailquote');" class="emailPost">Email this quote</a>
(notice the href="")
（注意 href=""）
回答by mkk
This code block works for IOS mobile devices where the scroll issue is very common.
此代码块适用于滚动问题非常常见的 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');
});
回答by Rajan Gupta
If you are using it like this
如果你像这样使用它
<a href="#targetid">Open Model</a>
(#tragetid) is the div popup id.
(#tragetid) 是 div 弹出窗口 ID。
You can use and replace href=""with data-mfp-src="". It's working perfectly.
您可以使用并替换href=""为data-mfp-src="". 它工作得很好。
