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

我在一个移动屏幕上显示一个对话框，它比屏幕的大小要长（所以它会滚动）

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

这里有一个关于JSbin问题的现场演示，供您观看

注意：若要重现该问题，请使用手机（任何手机）访问该问题，并尝试滚动到对话框的末尾。在安卓系统上试用过，iPhone也不适用

---

谢谢

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

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

试试这个：

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

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

在iOS 7上的Safari/Chrome中对我有效（请参阅），同时也给了Modal一种性感的反弹效果

---

---

最终有效的解决方案（即使对话框被取消）：。唯一的缺点是，每次关闭模式时，它都会滚动到页面顶部。

一个问题是，您的事件名称在Bootstrap 3中处于禁用状态。另一个原因是，基于webkit的移动浏览器似乎不遵守

上的

溢出：隐藏
。试试这个：

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

对所有这些人来说，因为我对答案不满意，所以我的笔记8不起作用。屏幕实际上冻结了

下面是我创建的黑客程序，它可能有bug，但解决了主要问题：）


欢迎澄清：）
我也有同样的问题！我花了一天时间来解决这个问题，但是

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

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

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


&时代；接近
题目
这是我想到的最好的解决方案。您可以调用“防止打开滚动对话框”，然后启用“关闭滚动对话框”

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

}

最简单的选择是在弹出窗口上使用
overscroll行为
CSS属性

.modal {
overscroll-behavior: contain;
}

此属性是专门为此用例添加到CSS中的。
在我的HTC One的默认浏览器中，问题是occours。但不是在手机上的谷歌Chrome上。@DannyThunder似乎是个例外。我在iPhone4S的iOS7上的Chrome浏览器上试用了它，我遇到了这个问题。三星S3上的默认浏览器也出现了这个问题。作为测试，如果在查看模型时根本不显示基线主体会怎么样？（取而代之的是将图像作为参考）@dannythrunder是可行的，但这听起来有点骇人听闻。底层内容是动态的，我需要找出一种方法，让它在拍摄快照之前拍下来。为什么显示的modal.on没有在jsBin中激发？你有什么具体的理由吗？没有。仍然不起作用（这里是-在手机上试用）效果很好-除非现在主体不会滚动，即使在模式关闭后也是如此。通过show.bs.modal事件应用CSS并在hidden.bs.modal事件上再次删除CSS应该可以。我查看了我的代码。您可以像这样使用.modal开放类：我在iOS 7上的Safari/Chrome上再次测试了它，它运行正常。我认为这是正确的答案，因为它甚至不需要任何javascript。适用于我的iPhone w/iOS7和三星S3，这是我仅有的设备。（最终解决方案w/just CSS:）@FloatingRock您的解决方案有效，但滚动被破坏。它不再平滑了。页面会滚动到顶部。Sven提供的解决方案有一个很好的平滑滚动，但每次都会滚动到顶部。天哪，你是一个
天才
！谢谢。老兄，这不是Android的解决方案。我的笔记8甚至对触摸手势都没有反应，因为它是固定的。甚至没有滚动。我的朋友三星Galaxy S3的原生浏览器和Chrome浏览器都可以接受这个答案。您的解决方案也很有效，我感谢您为找到有效的解决方案所付出的努力。谢谢阿诺比克！好的，谢谢：）但是请在不同的设备上测试。不幸的是，我的标签不起作用：“位置：已修复”有一个问题解决方案是页面跳转到顶部。它确实跳转回您所在的位置，但这不是100%的解决方案我的解决方案在移动和桌面上都能工作，而不会将正文向左或向上移动。您在接受答案时是否遇到过任何问题？是的。如果您的布局居中，则在应用固定p时会将布局强制到左侧位置位置设置看起来很糟糕。你基本上失去了页面上的初始滚动位置。基本上，当对话框打开时，所有内容都会向左移动并滚动到顶部。我有一个网站www.meyear.com登录，并在相册中添加了一些照片，单击一个。你会看到我的照片正在运行。我想补充一点，你的解决方案可能严格适用于暴徒ile，但我总是喜欢涵盖所有场景。你可以使用google chrome mobile emulator。顺便说一句。如果你愿意，我也可以将我的代码应用到你的js bin，以便更具体地满足你的需要。