Twitter bootstrap 3模式移动滚动问题

Question

Twitter bootstrap 3模式移动滚动问题

adi*_*dit 16 twitter-bootstrap twitter-bootstrap-3

我目前在手机上使用twitter bootstrap 3 modal.它在桌面上运行得非常好,但是每当我滚动它时,它也会在窗口后面滚动窗口.我该如何防止这种情况发生？

Answer 1

Mar*_*int 11

FOR BOOTSTRAP 3

我发现这个问题的解决方案似乎对我的网站来说已经足够了.

CSS:

body.modal-open > .wrap {
  overflow: hidden;
  height: 100%;
}

.modal-content, 
.modal-dialog, 
.modal-body { 
  height: inherit; 
  min-height: 100%; 
}

.modal { 
  min-height: 100%; 
}

Run Code Online (Sandbox Code Playgroud)

HTML:

<body>
  <div class="wrap">All non-modal content</div>
  <div class="modal"></div>
</body>

Run Code Online (Sandbox Code Playgroud)

因此,在打开模态的情况下,所有非模态内容都限制在视口的高度,并且隐藏溢出,这会阻止主站点滚动,而模式仍然可以滚动.

编辑:此修复程序在Firefox中有一些问题.

修复我的网站是(FF唯一的媒体查询):

@-moz-document url-prefix() {
  .modal-body { height: auto; min-height: 100%; }
  .modal { height: auto; min-height: 100%; }
  .modal-dialog {
    width: 100%;
    height: 100%;
    min-height: 100%;
    padding: 0;
    margin: 0;
    top: 0;
    left: 0;
  }

  .modal-content {
    height: auto;
    min-height: 100%;
    border-radius: 0;
    border: 0px solid #000;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
  }

}

Run Code Online (Sandbox Code Playgroud)

真棒,这是迄今为止最好的解决方案..应该将此作为拉取请求添加到bootstrap repo (3认同)
似乎所有这些都适合你,@ adit,想要_add it_;) (3认同)

Answer 2

Tri*_*mad 5

是的，今天当我在 iPhone 6s 上遇到这个问题时，这真是太烦人了。

即使使用最新的引导程序（我现在是3.3.6 ），这似乎仍然是一个问题。

CSS 快速修复解决方案：

body.modal-open { position: fixed; }

Run Code Online (Sandbox Code Playgroud)

“请注意，当模式打开时，这会产生“滚动”到页面顶部的副作用。”

在此处查看有关此解决方案的更多详细信息

JavaScript/jQuery解决方案：

更好的解决方案是利用bootstrap 的 modal events。该解决方案集成了快速修复方法，但修复了“页面顶部”问题。然后，您可以根据事件的需要更改 CSS。

在下面的代码中，我设置了事件中窗口的当前位置show.bs.modal（该值用于修复“快速修复”问题）。

然后我对事件应用 CSS 快速修复shown.bs.modal。换句话说，在模态弹出之后。

最后，当模式关闭时，我将主体的位置切换为相对位置（我相信也可以设置为静态）并将窗口滚动回其原始位置。

// set current position
var cPosition = false;

$('.modal').on('show.bs.modal', function(){

    cPosition = $(window).scrollTop();
})
.on('shown.bs.modal', function(){

    $('body').css({
        position:'fixed'
    });

})
.on('hide.bs.modal', function(){

    $('body').css({
        position:'relative'
    });

    window.scrollTo(0, cPosition);

});

Run Code Online (Sandbox Code Playgroud)

对于任何有一定 JavaScript 经验的人来说，设置应该相对简单。

希望他们能在 bootstrap 4 中解决这个问题，但在那之前，希望这个答案可以帮助其他有类似问题的人。

归档时间：	11 年，8 月前
查看次数：	20966 次
最近记录：	6 年，9 月前