Html 在移动浏览器上打开 Bootstrap 3 模式时如何防止背景滚动？

How to prevent background scrolling when Bootstrap 3 modal open on mobile browsers?

提问by fat fantasma

How to prevent background scrolling when Bootstrap 3 modal open on mobile platforms? On desktop browsers the background is prevented from scrolling and works as it should.

在移动平台上打开 Bootstrap 3 模式时如何防止背景滚动？在桌面浏览器上，背景被阻止滚动并正常工作。

On mobile browsers (Safari ios, Chrome ios, etc), when a modal is opened and using your finger to scroll it, the background also scrolls as does the modal. How do I prevent that?

在移动浏览器（Safari ios、Chrome ios 等）上，当打开模态并使用手指滚动它时，背景也会像模态一样滚动。我该如何防止？

采纳答案by Bass Jobsen

See here: https://github.com/twbs/bootstrap/issues/7501

见这里：https: //github.com/twbs/bootstrap/issues/7501

So try:

所以尝试：

$('body').css('overflow','hidden');
$('body').css('position','fixed');

V3.0.0. should have fixed this issue. Do you use the latest version? If so post an issue on https://github.com/twbs/bootstrap/

V3.0.0。应该解决了这个问题。你用的是最新版本吗？如果是这样，请在https://github.com/twbs/bootstrap/上发布问题

回答by Sivakumar

Try this,

尝试这个，

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

回答by Joe

I tried the accepted answer which prevented the body from scrolling but had the issue of scrolling to the top. This should solve both issues.

我尝试了已接受的答案，该答案阻止了正文滚动，但出现了滚动到顶部的问题。这应该可以解决这两个问题。

As a side note, it appears overflow:hidden doesn't work on body for iOS Safari only as iOS Chrome works fine.

作为旁注，它似乎溢出：隐藏仅在 iOS Safari 的主体上不起作用，因为 iOS Chrome 工作正常。

var scrollPos = 0;

$('.modal')
    .on('show.bs.modal', function (){
        scrollPos = $('body').scrollTop();
        $('body').css({
            overflow: 'hidden',
            position: 'fixed',
            top : -scrollPos
        });
    })
    .on('hide.bs.modal', function (){
        $('body').css({
            overflow: '',
            position: '',
            top: ''
        }).scrollTop(scrollPos);
    });

回答by Karthick Kumar

$('.modal') 
.on('shown', function(){ 
  console.log('show'); 
  $('body').css({overflow: 'hidden'}); 
}) 
.on('hidden', function(){ 
  $('body').css({overflow: ''}); 
}); 

use this one

使用这个

回答by Martin

No scripts needed.

不需要脚本。

BS 3 sets a .modal-open class on body that you can use to set the position and overflow values (made with LESS).

BS 3 在 body 上设置了一个 .modal-open 类，你可以用它来设置位置和溢出值（用 LESS 制作）。

body {
    font-family:'Open Sans';
    margin:0;

    &.modal-open {
        position:fixed;
        overflow:hidden;

        .modal { 
            overflow: scroll;

            @media only screen and (min-resolution:150dpi) and (max-width: @screen-sm),
            only screen and (-webkit-min-device-pixel-ratio:1.5) {
                overflow: scroll; 
                -webkit-overflow-scrolling: touch; 
            }
        }
    }   
}

回答by Mark Pruce

The chosen solution works, however they also snap the background to the top scrolling position. I extended the code above to fix that 'jump'.

所选的解决方案有效，但它们也会将背景对齐到顶部滚动位置。我扩展了上面的代码来修复那个“跳跃”。

//Set 2 global variables
var scrollTopPosition = 0;
var lastKnownScrollTopPosition = 0;

//when the document loads
$(document).ready(function(){

  //this only runs on the right platform -- this step is not necessary, it should work on all platforms
  if( navigator.userAgent.match(/iPhone|iPad|iPod/i) ) {

    //There is some css below that applies here
    $('body').addClass('platform-ios');

    //As you scroll, record the scrolltop position in global variable
    $(window).scroll(function () {
      scrollTopPosition = $(document).scrollTop();
    });

    //when the modal displays, set the top of the (now fixed position) body to force it to the stay in the same place
    $('.modal').on('show.bs.modal', function () {

      //scroll position is position, but top is negative
      $('body').css('top', (scrollTopPosition * -1));

      //save this number for later
      lastKnownScrollTopPosition = scrollTopPosition;
    });

    //on modal hide
    $('.modal').on('hidden.bs.modal', function () {

      //force scroll the body back down to the right spot (you cannot just use scrollTopPosition, because it gets set to zero when the position of the body is changed by bootstrap
      $('body').scrollTop(lastKnownScrollTopPosition);
    });
  }
});

The css is pretty simple:

css非常简单：

// You probably already have this, but just in case you don't
body.modal-open {
  overflow: hidden;
  width: 100%;
  height: 100%;
}
//only on this platform does it need to be fixed as well
body.platform-ios.modal-open {
  position: fixed;
}

回答by Tonijn

If you use jQuery you can do this with scrollTop

如果您使用 jQuery，则可以使用scrollTop执行此操作

1. Save the body's vertical scroll position;
2. Disable scroll on the body;
3. Show modal;
4. Close modal;
5. Reenable scroll on body;
6. Set saved scroll position.

1. 保存 body 的垂直滚动位置；
2. 禁用身体滚动；
3. 显示模态；
4. 关闭模态；
5. 重新启用身体滚动；
6. 设置保存的滚动位置。

#modal {
    bottom: 0;
    position: fixed;
    overflow-y: scroll;
    overflow-x: hidden;
    top: 0;
    width: 100%;
}

$('.open-modal').click(function (e) {
    e.preventDefault();
    $('#modal').toggle();
    scrollTo = $('body').scrollTop();
    $('body').css("position", "fixed");
});

$('.close-modal').click(function (e) {
    e.preventDefault();
    $('#modal').toggle();
    $('body').css("position", "static");
    $('body').animate({scrollTop: scrollTo}, 0);
});

回答by Mugur 'Bud' Chirica

The above answers did not help so what I did was:

上面的答案没有帮助，所以我所做的是：

.modal {
  -webkit-overflow-scrolling: touch; 
}

My particular problem was when I increased the modal size after loading.

我的特殊问题是当我在加载后增加模态大小时。

It's a known iOS issue, see here. Since it does not break anything else the above solution was enough for my needs.

这是一个已知的 iOS 问题，请参阅此处。由于它不会破坏任何其他内容，因此上述解决方案足以满足我的需求。

回答by Lucas

This might be a bit like beating a dead horse here.. but, my currently implemented solution on DIY modals via vanilla JS:

这可能有点像在这里打败一匹死马……但是，我目前通过 vanilla JS 在 DIY modals 上实现的解决方案：

On modal show:

在模态显示上：

if (document.body.style.position !== 'fixed') {
    document.body.style.top = -window.scrollY + 'px';
    document.body.style.position = 'fixed';
}

On modal hide:

在模态隐藏上：

document.body.style.position = '';
window.scrollTo(0, -parseInt(document.body.style.top, 10));
document.body.style.top = '';

回答by Ryan Charmley

Had an issue with this as well, iPhone + Safari where needed to add:

也有这个问题，iPhone + Safari 需要添加：

position: fixed;

As mentioned elsewhere, this created a scroll-to-top issue. Fix that worked for me was to capture the position to top upon modal open, and then animate to that position on modal close

正如其他地方所提到的，这产生了一个滚动到顶部的问题。对我有用的修复是在模态打开时捕捉到顶部的位置，然后在模态关闭时动画到该位置

upon modal open:

在模态打开时：

scrollTo = $('body').scrollTop();
$('body').css("position", "fixed");

upon modal close

模式关闭时

$('body').css("position", "static");
$('body').animate({scrollTop: scrollTo}, 0);