Question

我在移动设备屏幕上显示的对话框长度大于屏幕尺寸（因此会滚动显示）。

问题出现了：当你滚过对话框的底部时（我碰巧使用的是Bootstrap 3），我希望它能够停止。相反，它开始滚动底层的身体。我已经尝试了this建议解决方案中建议的所有内容，但它仍然没有工作！

这是关于JSbin问题的现场演示，为了您的观赏乐趣

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

谢谢！

Answer 1

试试这个：

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

在iOS 7的Safari / Chrome中为我工作（请参阅http://jsbin.com/aXoMaGo/2），同时也为模态提供了性感的反弹效果。

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

Answer 2

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

body.noscroll{
overflow:hidden;
position:fixed;
}

Answer 3

一个问题是你的事件名称是关闭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: ''
    });
  });
});

Answer 4

对于所有那些因为我对答案不满意所以它不适用于我的笔记8。屏幕实际上冻结了。

这是我创建的黑客可能是错误但解决了主要问题:)

js bin

欢迎任何澄清：）

Answer 5

它还没有很好的浏览器支持，但最简单的选择是在弹出窗口中使用overscroll-behavior CSS属性。

.modal {
overscroll-behavior: contain;
}

此属性已专门针对此用例添加到CSS中。

Answer 6

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

我写的唯一能为我工作的东西就是这段代码我希望它能为你工作！

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

Answer 7

这是我的模态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>

Answer 8

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

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

}

防止移动屏幕上的对话框滚动正文

8 个答案: