iOS 上的 BootStrap 模态背景滚动

Question

因此，iOS 上的模态存在这个已知问题，当启用模态时，向上/向下滑动将滚动正文而不是模态。

使用引导程序 3.3.7

尝试谷歌它，大多数建议添加

body.modal-open {
  overflow: hidden !important;
}

但它不起作用。

有人建议，

 body.modal-open {
  position: fixed;
}

但背景会跳到页面顶部。

所以现在我正在使用，

 body.modal-open {
  overflow: hidden !important;
  position: fixed;
  width: 100%;
}
#exampleModal {
  background: black;
}

作为一种变通方法，因此无法看到跳跃（但仍然很明显）

有其他解决方案吗？

这是我正在处理的网站 http://www.einproductions.com/

原文由 juniortan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我采用了@Aditya Prasanthi 和@JIm 的解决方案，因为一个修复了背景滚动，另一个修复了关闭模式后跳到顶部，并将它们变成了一个最小的 JS 脚本：

 let previousScrollY = 0;

$(document).on('show.bs.modal', () => {
    previousScrollY = window.scrollY;
    $('html').addClass('modal-open').css({
        marginTop: -previousScrollY,
        overflow: 'hidden',
        left: 0,
        right: 0,
        top: 0,
        bottom: 0,
        position: 'fixed',
    });
}).on('hidden.bs.modal', () => {
    $('html').removeClass('modal-open').css({
        marginTop: 0,
        overflow: 'visible',
        left: 'auto',
        right: 'auto',
        top: 'auto',
        bottom: 'auto',
        position: 'static',
    });
    window.scrollTo(0, previousScrollY);
});

当然，可能甚至建议使用类来设置和取消设置正文的 CSS，但是，我选择此解决方案仅在一个地方解决问题（并且也不需要外部 CSS）。

原文由 Klaas van der Weij 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这将防止在 iOS 移动设备上打开 Modal 时页面滚动

if ($(window).width() < 960) {
        let previousScrollY = 0;
        $(document).on('show.bs.modal', () => {
            previousScrollY = window.scrollY;
            $('html').addClass('modal-open').css({
                marginTop: -previousScrollY,
                overflow: 'hidden',
                left: 0,
                right: 0,
                top: 0,
                bottom: 0,
                position: 'fixed',
            });

        }).on('hidden.bs.modal', () => {
            $('html').removeClass('modal-open').css({
                marginTop: 0,
                overflow: 'visible',
                left: 'auto',
                right: 'auto',
                top: 'auto',
                bottom: 'auto',
                position: 'static',
            });
            window.scrollTo(0, previousScrollY);
        });
    }

原文由 trop yes 发布，翻译遵循 CC BY-SA 4.0 许可协议