iOS上的BootStrap Modal背景滚动 [英] BootStrap Modal background scroll on iOS

问题描述

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

So there is this known issue with modal on iOS, when the modal is enabled swiping up/down will scroll the body instead of the modal.

使用bootstrap 3.3 .7

Using bootstrap 3.3.7

尝试使用Google进行搜索，最建议添加

Tried to google it, most suggested adding

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

但不起作用。

有人建议

body.modal-open {
  position: fixed;
}

但是背景会跳到页面顶部。

But background will jump to the top of the page.

所以我现在正在使用

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

作为一种变通办法，因此看不到跳转（但仍然

As a work-around so the jump can't be seen(but still noticeable)

还有其他解决方案吗？

这是我正在工作的网站 http://www.einproductions.com/

This is the site i am working on http://www.einproductions.com/

推荐答案

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

I've taken the solutions of @Aditya Prasanthi and @JIm, since one fixes the background-scrolling and the other fixes the skip-to-the-top after closing the modal, and turned them into one bare-minimum JS script:

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。但是，我选择此解决方案仅是在一个地方解决问题（并且也不需要外部CSS）。

It's, of course, possible and even adviced to use a class to set and unset the CSS for the body, however, I choose this solution to resolve a problem just in one place (and not require external CSS as well).

这篇关于iOS上的BootStrap Modal背景滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！