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

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

如何防止背景滚动？

Example here

的“通过电子邮件发送报价”链接到PDF截图的权利。

谢谢！ Joe

来源

2010-02-04 Joe

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

另一种选择是点击$(window).scroll()事件并从那里返回false。这也会导致一些闪烁，因为浏览器不会对返回的错误语句做出快速反应。

你最好的赌注是你的点击事件处理程序移动到一个单独的文件，然后执行绑定有：

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

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

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

来源

2010-02-04 18:00:42

谢谢。但是，这种解决方案会导致屏幕闪烁？此外，pageTracker是通过Wordpress中设置的自定义字段传递的，并且不容易与jQuery进行交互。 – Joe

在safari 4和firefox 3.5.7中不起作用。 – DataGreed

我有同样的情况。这是一个不错的解决方案，因为它锁定了FF24.0中的滚动条，但它仍然允许页面使用end/home/pageup/pagedown进行移动;此外，它似乎不能在IE8中工作。我还没有对这两个浏览器做进一步测试，但上面的评论似乎表明这个问题需要一些工作。 – Thomas

请勿在链接中使用＃标记！

它会尝试滚动到锚点＃但由于它是空的，它将滚动到页面的顶部。

编辑您的链接：

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

（注意在href = “”）

来源

2010-02-04 17:55:23 YesMan85

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

对不起，罗吉尔，这并没有解决问题。它也使得页面重新加载，关闭弹出窗口。虽然谢谢！ – Joe

是的，你仍然必须使用返回假现象！但这是真正基本的JS;） 'Email this quote' 将工作正常。 – YesMan85

隐藏身体的滚动打开弹出

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

何时恢复关闭弹出窗口

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

来源

2012-08-17 11:55:22 sudhAnsu63

分配隐藏的溢出将导致滚动条消失，从而改变页面宽度。这不会禁用滚动条，但它确实可以防止发生滚动。 – Thomas

我喜欢这个解决方案:) – jondinham

你的解决方案能够工作，但是当你关闭弹出窗口并再次启用它时，它也会给出横向滚动。这不是必需的。 –

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

来源

2017-07-17 10:40:55

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

回答

相关问题