Question

所以在iOS上有模态的已知问题，当启用模态时向上/向下滑动将滚动主体而不是模态。

使用bootstrap 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/

的网站

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）。

Answer 2

参考Does overflow:hidden applied to <body> work on iPhone Safari?

当模态显示

时，将.freezePage添加到html和body

$('.modal').on('shown.bs.modal', function (e) {
  $('html').addClass('freezePage'); 
  $('body').addClass('freezePage');
});
$('.modal').on('hidden.bs.modal', function (e) {
  $('html').removeClass('freezePage');
  $('body').removeClass('freezePage');
});

CSS

.freezePage{
  overflow: hidden;
  height: 100%;
  position: relative;
}

Answer 3

我的解决方案：

scrollPos = window.scrollY  - get current scroll position.

body { position: fixed;
   margin-top: -**scrollPos** px);

}

然后关闭模态：

body {position: "";
  margin-top: "";

}

并在打开的模态窗口之前将滚动位置返回到指向：

window.scrollTo(0, scrollPos);

Answer 4

以上答案对我都不起作用，模态一直消失，我最终得到了一种蛮力，低效但有效的蛮力方法！

$('body').on('touchstart touchmove touchend', e => {
    let scrollDisabled=$('.scroll-disable');
    if (scrollDisabled.length > 0 &&  scrollDisabled.has($(e.target)).length===0) {
        e.preventDefault(); 
        e.stopPropagation();
    }
});
setInterval(() => $('.modal:visible').css('top', '20px'), 100);

$(document).on({
    'show.bs.modal': e => $(e.target).addClass('scroll-disable'),
    'hidden.bs.modal': e => $(e.target).removeClass('scroll-disable')
}, '.modal');

Answer 5

导入此文件，然后使用enableBodyScroll和disableBodyScroll函数锁定和解锁正文滚动。

使用css top属性将精确导航回到上一个位置。消除了处理浮点余量的缺点。

const toggleBodyScroll = (position, initialMargin) => {
  document.body.style.position = position;
  document.body.style.top = initialMargin;
};

const getScrolledPosition = () => {
  return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
};

const scrollToPrevPosition = (scrolledPosition) => {
  window.scrollTo(0, scrolledPosition);
};

const getWindowTop = () => {
  return window.getComputedStyle(document.body).getPropertyValue('top');
};

export const disableBodyScroll = () => {
  toggleBodyScroll('fixed', `-${getScrolledPosition()}px`);
};

export const enableBodyScroll = () => {
  const scrollPosition = 0 - parseInt(getWindowTop());
  toggleBodyScroll('static', 0);
  scrollToPrevPosition(scrollPosition);
};

Answer 6

这将防止在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);
        });
    }

iOS上的BootStrap模态背景滚动

6 个答案: