Question

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

Answer 1

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%; 
}

HTML：

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

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

编辑：此修补程序在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;
  }

}

Answer 2

当我今天在iphone 6s上遇到这个问题时，这非常烦人。

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

CSS Quickfix 解决方案：

body.modal-open { position: fixed; }

＆＃34;请注意，这会产生＆＃34;滚动＆＃34;的副作用。当模态打开时，到页面顶部。＆＃34;

详细了解此解决方案here

Javascript / jQuery 解决方案：

更好的解决方案是使用bootstrap's modal events。此解决方案集成了quickfix方法，但修复了页面顶部＆＃39;问题。然后，您可以根据事件根据需要更改css。

在下面的代码中，我在事件show.bs.modal上设置了窗口的当前位置（此值用于修复＆＃39; quickfix＆＃39;问题）。

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

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

// 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);

});

为具有一定javascript经验的任何人设置应该相对简单。

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

Answer 3

我注意到它只在滚动模式时滚动背景页面而你点击了模态的底部，然后如果你试图继续向下滚动它会滚动背景页面。查看右侧溢出条，只有当模态打开时才会显示（在Chrome-Android上）

似乎效果是将模态滚动到模态的范围，然后即使模态仍然打开，也会自动滚动背景页面。

Answer 4

有趣的是，他们在文档中解决了这个问题而没有提供太多解决方案：

“支持溢出：隐藏在<body>元素上在iOS和Android中非常有限。为此，当您在这些设备的浏览器中滚动浏览模式的顶部或底部时，{ {1}}内容将开始滚动。“

http://getbootstrap.com/getting-started/#overflow-and-scrolling

Answer 5

嘿伙计们，所以我觉得我找到了一个Bootstrap 3的修复程序。这对我现在在iphone和android上工作。它是一个小时的搜索，阅读和测试的混搭。因此，如果您在此处看到部分代码，那么信用证会转到您的身上。

@media only screen and (max-device-width:768px){

body.modal-open {
// block scroll for mobile;
// causes underlying page to jump to top;
// prevents scrolling on all screens
overflow: hidden;
position: fixed;
}
}

body.viewport-lg {
// block scroll for desktop;
// will not jump to top;
// will not prevent scroll on mobile
position: absolute; 
}

body {  
overflow-x: hidden;
overflow-y: scroll !important;
}

媒体特定的原因是在桌面上我遇到问题，当模式打开时，页面上的所有内容都会从中心向左移动。看起来像废话。因此，这需要针对您需要滚动的平板电脑尺寸设备。手机和平板电脑仍有轻微转变，但实际上并不多。如果这适用于你们，请告诉我。希望这能把钉子放在棺材里

Answer 6

对于Bootstrap 3

我找到了iscroll.js

的移动设备（触摸屏）解决方案

在模态添加的内容中：

 <div id="smartScroll"> Content of the modal </div>

初始化.js

var myScroll = new IScroll('#smartScroll', {
   mouseWheel: true,
   scrollbars: true,
   click: true
});

Answer 7

 .modal-open .modal .modal-dialog {
   max-height: 100%;
  }

这对我有用！

Twitter bootstrap 3模式移动滚动问题

7 个答案: