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

【问题标题】：Prevent dialog on mobile screen from scrolling the body防止移动屏幕上的对话框滚动正文
【发布时间】：2013-09-24 10:48:42
【问题描述】：

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

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

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

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

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

谢谢！

【问题讨论】：

在我的 HTC One 的默认浏览器中，出现了问题。但不是在手机上的 Google Chrome 中。
@DannyThunder 似乎是个例外。我在 iPhone 4S 上的 iOS7 上的 Chrome 上尝试过，但我遇到了问题。三星 S3 上的默认浏览器也存在此问题。
作为一个测试，如果在查看模态时根本不显示底层主体怎么办？（而不是查看图像作为参考）
@DannyThunder 可行，但这听起来很老套。底层内容是动态的，我需要想办法让它事先拍摄快照。
为什么 modal.on 没有在 jsBin 中触发？你有什么具体原因吗

标签： javascript jquery css twitter-bootstrap mobile

【解决方案1】：

试试这个：

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。唯一的缺点是每次关闭模式时它都会滚动到页面顶部。

【讨论】：

效果很好 - 除了现在正文不会滚动，即使在模式关闭后也是如此。
通过 shown.bs.modal 事件应用 CSS 并在 hidden.bs.modal 事件上再次删除它应该可以解决问题。
我查看了我的代码。您可以像这样使用 .modal-open 类：jsbin.com/aXoMaGo/6 我再次在 iOS 7 上的 Safari/Chrome 上对其进行了测试，并且可以正常工作。
我选择了这个作为正确答案，因为它甚至不需要任何 javascript。可以在我的 iPhone w/iOS7 和三星 S3 上使用——这是我身边唯一的设备。（仅使用 CSS 的最终解决方案：jsbin.com/aXoMaGo/10/edit）
@FloatingRock 您的解决方案有效，但滚动已损坏。它不再光滑。页面滚动到顶部。 Sven 提供的解决方案有一个很好的平滑滚动，而且每次都滚动到顶部。

【解决方案2】：

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

.modal {
overscroll-behavior: contain;
}

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

【讨论】：

对我不起作用，正文仍在后台滚动。在 Macbook 上的 Chrome 中测试。

【解决方案3】：

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

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

【讨论】：

不。还是不行（这里是edited JSbin - 在手机上试试）

【解决方案4】：

一个问题是您的事件名称对于 Bootstrap 3 是关闭的。另一个问题是基于 webkit 的移动浏览器似乎不遵守 <body> 上的 overflow: hidden。试试这个：

$(function(){
  $('#myModal').modal().on('shown.bs.modal', function(){
    $('body').css({
      position: 'fixed'
    });
  }).on('hidden.bs.modal', function(){
    $('body').css({
      position: ''
    });
  });
});

【讨论】：

天啊，你是genius！谢谢。
老兄，这不是 Android 的解决方案。我的笔记 8 甚至没有响应触摸手势，因为它是固定的。甚至没有滚动。

【解决方案5】：

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

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

js bin

欢迎任何澄清:)

【讨论】：

接受的答案适用于我的朋友三星 Galaxy S3 的本机和 Chrome 浏览器。您的解决方案也很有效，我感谢您为找到有效的解决方案所付出的努力。谢谢阿诺比克！
好的，谢谢 :) 但请在不同的设备上进行测试。不幸的是，我的标签不起作用:(
“position:fixed”解决方案的一个问题是页面跳转到顶部。它确实会跳回你原来的位置，但它不是 100% 的解决方案

【解决方案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);  
                  });
    }

【讨论】：

【解决方案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>

【讨论】：

【解决方案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);

}

【讨论】：

我的解决方案适用于移动设备和桌面设备，无需向左或向上移动主体。
您对接受的答案是否有任何问题？ jsbin.com/aXoMaGo/10/edit
是的。如果您有一个居中的布局，当您应用看起来很糟糕的固定定位时，它会强制布局到左侧位置。您实际上失去了页面上的初始滚动位置。基本上，当对话框打开时，所有内容都会向左移动并滚动到顶部。我有一个网站 www.meyearly.com 登录并添加一些照片到相册，单击一个。你会看到我的行动。
我想补充一点，您的解决方案可能只适用于移动设备，但我总是喜欢涵盖所有场景。
您可以使用谷歌浏览器移动模拟器。顺便提一句。此外，如果您愿意，我可以将我的代码应用到您的 js bin 以更具体地满足您的需求。