position: fixed 到页面正文。

 var savedScrollPosition;

 $(document).on('show.bs.modal', '.modal', function() {
     savedScrollPosition = $(window).scrollTop();
 });

 $(document).on('hidden.bs.modal', '.modal', function() {
     window.scrollTo(0, savedScrollPosition);
 });

body.modal-open {
     position: fixed;
     width: 100%;
}

谢谢你的帮助!!我本来会回应你的评论,但我还没有这样做的名声。

Ignacios Answer为我解决了这个问题。 还将此规则添加到css中:

body.fixed{
  position: fixed;
}

我也有同样的问题 position: fixed 解决方案 body 身体 导致浏览器“跳转”到页面顶部,因此当您在弹出窗口/模式关闭时将其删除时,用户可能会感到困惑。

如果你的弹出/模式在iOS上是全屏的,你可以做什么来修复它是保存滚动位置,然后再添加 位置:固定 用这样的东西初始化(使用jQuery,但可以很容易地用 vanilla js ):

var savedScrollPosition = $(window).scrollTop()
$('body').addClass('has-fullscreen-modal')

$('body').removeClass('has-fullscreen-modal')
window.scrollTo(0, savedScrollPosition)

您的css将

body.has-fullscreen-modal {
  position: fixed;
}

个人 position: fixed 自动滚动到顶部 . 真烦人!

避免惩罚其他设备和版本 我只将此修复程序应用于适当版本的iOS。

**版本1-所有模态修复**

$(document).ready(function() {

    // Detect ios 11_x_x affected  
    // NEED TO BE UPDATED if new versions are affected
    var ua = navigator.userAgent,
    iOS = /iPad|iPhone|iPod/.test(ua),
    iOS11 = /OS 11_0|OS 11_1|OS 11_2/.test(ua);

    // ios 11 bug caret position
    if ( iOS && iOS11 ) {

        // Add CSS class to body
        $("body").addClass("iosBugFixCaret");

    }

});

对于CSS

/* Apply CSS to iOS affected versions only */
body.iosBugFixCaret.modal-open { position: fixed; width: 100%; }

我修改了该函数,使其仅对具有类的选定模态激发 .inputModal

只有具有输入的模态才会受到影响,以避免滚动到顶部。

$(document).ready(function() {

    // Detect ios 11_x_x affected
    // NEED TO BE UPDATED if new versions are affected 
    (function iOS_CaretBug() {

        var ua = navigator.userAgent,
        scrollTopPosition,
        iOS = /iPad|iPhone|iPod/.test(ua),
        iOS11 = /OS 11_0|OS 11_1|OS 11_2/.test(ua);

        // ios 11 bug caret position
        if ( iOS && iOS11 ) {

            $(document.body).on('show.bs.modal', function(e) {
                if ( $(e.target).hasClass('inputModal') ) {
                    // Get scroll position before moving top
                    scrollTopPosition = $(document).scrollTop();

                    // Add CSS to body "position: fixed"
                    $("body").addClass("iosBugFixCaret");
                }
            });

            $(document.body).on('hide.bs.modal', function(e) {
                if ( $(e.target).hasClass('inputModal') ) {         
                    // Remove CSS to body "position: fixed"
                    $("body").removeClass("iosBugFixCaret");

                    //Go back to initial position in document
                    $(document).scrollTop(scrollTopPosition);
                }
            });

        }
    })();
});

对于CSS

/*仅将CSS应用于受iOS影响的版本*/
身体iosBugFixCaret。模式打开{位置:固定;宽度:100%;}

对于HTML 添加类 输入模式

<div class="modal fade inputModal" tabindex="-1" role="dialog">
    ...
</div>

Nota bene公司 javascript函数现在是自调用的

裁判: iOS 11 Safari bootstrap modal text area outside of cursor

我已经用这个CSS修复了这个问题

@media(max-width:767px) {
    body {
        position:fixed !important;
        overflow:auto !important;
        height:100% !important;
    }
}