Question

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

如何阻止背景滚动？

在“pdf屏幕截图”右侧发送“发送此报价”链接。

Answer 1

一个选项是暂时将overflow属性设置为hidden body，这样可以摆脱滚动条，但在调整页面时会产生一点闪烁。

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

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

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

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

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

Answer 2

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

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

修改您的链接：

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

（注意href =“”）

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');
});

Answer 4

如果您这样使用它

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

（＃tragetid）是div弹出ID。

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

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

4 个答案: