Twitter bootstrap 关于移动滚动问题的twitter bootstrap 3模式

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

我注意到，当您在模式中滚动并且到达模式底部时，它只会滚动背景页，如果您尝试向下滚动，它会滚动背景页。看右边的溢出条，当modal打开时（在Chrome Android上）它才可见

---

其效果似乎是将模式滚动到模式范围内，然后自动滚动背景页，即使模式仍处于打开状态。

对于BOOTSTRAP 3

我找到了一个解决这个问题的方法，对我的网站来说似乎已经足够好了

CSS:

HTML:

---

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

“对溢出的支持：在iOS和Android中，隐藏在

元素上的功能非常有限。为此，当您在这些设备的浏览器中滚动过某个模式的顶部或底部时，

内容将开始滚动。”

---

嘿，伙计们，我想我找到了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;
}

---

特定媒体出现在桌面上的原因是，当模式打开页面上的所有内容时，我遇到了问题，它会从居中向左移动。看起来像垃圾。因此，这项技术的目标是平板电脑大小的设备，您需要在这些设备上滚动。在手机和平板电脑上仍有轻微的变化，但实际上变化不大。让我知道这对你们是否有效。希望这能把钉子钉进棺材

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

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

CSS快速修复解决方案：

body.modal-open { position: fixed; }

请注意，这有一个副作用，即在模式打开时“滚动”到页面顶部

请参阅有关此解决方案的更多详细信息

Javascript/jQuery解决方案：

body.modal-open { position: fixed; }

更好的解决办法是利用。此解决方案集成了quickfix方法，但修复了“页面顶部”问题。 然后，您可以根据需要根据事件更改css

在下面的代码中，我在事件

show.bs.modal

上设置了窗口的当前位置（该值用于修复“快速修复”问题）

然后，我将css快速修复应用于

show.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);

});    

对于任何有javascript经验的人来说，设置应该相对简单

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

用于引导3

我找到了一个移动设备（触摸屏）的解决方案

在模态分析的内容中添加：

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

---

这对我有用

你能识别“有时”吗？你能用@Skelly发布你的代码或重新创建吗？这不是有时，这是我一直在体验你所说的。这在官方文件中提到：这是对问题的评论还是试图回答？太棒了，这是迄今为止最好的解决方案。。本应将此作为拉取请求添加到引导报告中，@adit，您想要添加它似乎非常合适；）边框：0px实心透明会更好；）不，真的，这是最好的解决方案-我搜索了很多！它可以工作，但在手机上会滚动到顶部，这很烦人。

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

});    

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

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

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