iOS 上的 BootStrap 模态背景滚动答案

【问题标题】：BootStrap Modal background scroll on iOSiOS 上的 BootStrap 模态背景滚动
【发布时间】：2020-09-29 22:15:05
【问题描述】：

因此，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/

【问题讨论】：

我尝试在 chrome 上使用模拟器并从 body.modal-open 中删除了您的样式，它可以正常工作。打开模式时我无法滚动。这就是你想要实现的目标吗？
没有错误，但我面临的问题是启用模式时向上/向下滑动将滚动正文而不是模式。
是的，就像我说的，当您删除 body.modal-open 的 css 时，它不会在 chrome 上的模拟器上滚动正文。我没有用实际的移动设备测试它
是的，这个问题会影响 iOS 设备。
@juniortan 你找到可行的解决方案了吗？我正在经历同样的事情，背景滚动但模态本身不滚动，但仅在 iOS 上，并且仅在某些时候。在输入框和模态底部周围似乎更有问题。我觉得我在阳光下什么都试过了

标签： ios css twitter-bootstrap

【解决方案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）。

【讨论】：

这是我经过一个小时的尝试后唯一正确地破坏了 iOS 上滚动的东西。谢谢！
为什么这不是解决方案？在我搜索了一堆非常糟糕的解决方案之后，这是唯一真正有效的方法。谢谢大佬！
我尝试使用第三方插件“body-scroll-lock”，声称可以与 iOS 一起使用，但最终没有。我认为这是一个更好的解决方案，并且是唯一适用于 Apple 设备的解决方案
这会破坏模式中的工具提示，因为工具提示的translate3d 或top 属性没有考虑html 元素的负上边距。如果您在打开模式之前向下滚动页面，则工具提示的位置将高于应有的位置。
您可以通过将$().tooltip() 函数的container 选项设置为模态元素来解决此问题。

【解决方案2】：

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

在模态显示时将 .freezePage 添加到 html 和正文

$('.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;
}

【讨论】：

这不起作用，至少在我的 iOS 12 测试设备上。
这不起作用。在模式打开时滚动过去仍然会滚动页面。

【解决方案3】：

我的解决方案：

scrollPos = window.scrollY  - get current scroll position.

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

}

然后模态关闭：

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

}

并将滚动位置返回到打开模式窗口之前的点：

window.scrollTo(0, scrollPos);

【讨论】：

【解决方案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');

【讨论】：

【解决方案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);
};

【讨论】：

【解决方案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);
        });
    }

【讨论】：