2

我正在移动屏幕上显示一个比屏幕尺寸长的对话框（因此它会滚动）。

这就是问题所在：当您滚动到对话框底部时（我碰巧使用的是 Bootstrap 3），我希望它会停止。相反，它开始滚动底层主体。我已经尝试了此推荐解决方案中建议的所有方法，但它仍然无法正常工作！

这是 JSbin 上的问题现场演示，供您观看

http://jsbin.com/EdAhAsU/1/

注意：要重现此问题，请使用移动设备（任何移动设备）访问它并尝试滚动到对话框末尾。在 Android 和 iPhone 上尝试过 - 两者都不起作用。

谢谢！

4

8 回答 8

12

尝试这个：

body {
    left: 0;
    -webkit-overflow-scrolling: touch;
    position: fixed;
    top: 0;
    width: 100%;
}

在 iOS 7 上的 Safari/Chrome 中为我工作（参见http://jsbin.com/aXoMaGo/2），并且还为 Modal 提供了性感的弹跳效果。

有效的最终解决方案（即使对话框被关闭）：https ://jsbin.com/aXoMaGo/6 。唯一的缺点是每次关闭模式时它都会滚动到页面顶部。

于 2013-09-27T15:39:24.167 回答
3

最简单的选择是overscroll-behavior在弹出窗口上使用 CSS 属性。

.modal {
overscroll-behavior: contain;
}

这个属性是专门为这个用例添加到 CSS 中的。

于 2017-11-16T19:33:48.967 回答
2

我有一个类似的问题。通常溢出：隐藏在桌面上完成此操作。对于移动设备，您还需要应用固定位置。因此，当您的对话框处于活动状态时，将“.noscroll”类添加到正文：

body.noscroll{
overflow:hidden;
position:fixed;
}
于 2013-09-25T22:10:31.107 回答
2

一个问题是您的事件名称在 Bootstrap 3 中是关闭的。另一个是基于 webkit 的移动浏览器似乎不服从overflow: hidden. <body>尝试这个：

$(function(){
  $('#myModal').modal().on('shown.bs.modal', function(){
    $('body').css({
      position: 'fixed'
    });
  }).on('hidden.bs.modal', function(){
    $('body').css({
      position: ''
    });
  });
});
于 2013-09-30T03:35:30.687 回答
1

对于所有这些人，由于我对答案不满意，因此它不适用于我的注释 8 。屏幕实际上冻结了。

这是我创建的 hack 可能有问题但解决了主要问题:)

js bin

欢迎任何澄清:)

于 2013-09-30T04:54:45.197 回答
1

我有同样的问题！我花了一天时间来解决这个问题，但是....

我为我编写和工作的唯一东西就是这段代码，我希望它对你有用！

if( navigator.userAgent.match(/iPhone|iPad|iPod/i) ) {
        $('.modal').on('show.bs.modal', function() {
                    var scrollNo=$(window).scrollTop();
                    $('.modal-open').css('position', 'fixed');
                  });
        $('.modal').on('hide.bs.modal', function() {
                    $('body').css('position', '');
                    $(window).scrollTop(scrollNo);  
                  });
    }
于 2014-11-14T20:04:05.327 回答
0

这是我的模态 Html 代码 

<div class="modal fade" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" tabindex="-1" aria-describedby="ContentLoader">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title">Topic title</h4>
          </div>
          <div class="modal-body">
              <!-- some content -->
          </div>
          <div class="modal-footer">
              <!-- footer -->
          </div>
        </div>
      </div>
    </div>
于 2014-11-14T20:08:39.520 回答
0

这是我想出的最好的解决方案。您在对话框打开时调用防止滚动，然后在对话框关闭时启用滚动。

var lastScrollPos = 0;
preventScoll = function () {

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

}
enableScroll = function () {

    $('body').css('position', 'relative');
    $('body').css('overflow', 'auto');
    window.scrollTo(0, lastScrollPos);

}
于 2015-02-05T16:44:40.107 回答