在 jQuery Mobile 中打开弹出窗口时如何避免上下滚动答案

【问题标题】：How can I avoid scroll up and down when a popup is open in jQuery Mobile在 jQuery Mobile 中打开弹出窗口时如何避免上下滚动
【发布时间】：2015-08-21 21:09:55
【问题描述】：

我有这个示例 jquery 弹出代码：http://jsfiddle.net/9jrrd1hL/

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<body>

<div data-role="page">
  <div data-role="header">
    <h1>Welcome To My Homepage</h1>
  </div>

  <div data-role="main" class="ui-content">
    <a href="#myPopupDialog" data-rel="popup" data-position-to="window" data-transition="fade" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">Open Dialog Popup</a>
            <p>Table Example:</p>
<style type="text/css">
table.example5 {background-color:GreenYellow;border:1px dotted black;width:100%;}
table.example5 th, table.example5 td {text-align:center;border:0;padding:5px;background-color:transparent;}
table.example5 th {background-color:LimeGreen;color:white;}
table.example5 th:first-child {width:20%;}
</style>
<table class="example5">
<tr>
<th rowspan="2">Table header</th><td>Table cell 1
</tr>
<tr>
<td>Table cell 2</td>
</tr>
</table>
      <p>Frames Example:</p>
<iframe src="/html/templates/frames/frames_example_1.html" width="80%" height="90%">
</iframe>
    <p>Image  Example:</p>
<a href="http://www.quackit.com/travel/new_zealand/milford_sound"><img src="/pix/milford_sound/milford_sound_t.jpg" style="max-width:100%" alt="Milford Sound in New Zealand" /></a>

    <p>Frames Example:</p>
<iframe src="/html/templates/frames/frames_example_1.html" width="80%" height="90%">
</iframe>
    <p>Image  Example:</p>
<a href="http://www.quackit.com/travel/new_zealand/milford_sound"><img src="/pix/milford_sound/milford_sound_t.jpg" style="max-width:100%" alt="Milford Sound in New Zealand" /></a>


    <div data-role="popup" id="myPopupDialog">
      <div data-role="header">
        <h1>Header Text</h1>
      </div>

      <div data-role="main" class="ui-content">
        <h2>Welcome to my Popup Dialog!</h2>
        <p>jQuery Mobile is FUN!</p>
        <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b ui-icon-back ui-btn-icon-left" data-rel="back">Go Back</a>
      </div>



      <div data-role="footer">
        <h1>Footer Text</h1>
      </div>
    </div>
  </div>

  <div data-role="footer">
    <h1>Footer Text</h1>
  </div>
</div>

我的真实代码中有很大的背景，所以我想要做的是每次打开弹出窗口时，我希望它避免用户能够根据背景向下或向上滚动。

【问题讨论】：

How to disable scrolling of body element?的可能重复

标签： javascript jquery html css jquery-mobile

【解决方案1】：

在你打开弹出按钮时使用它

<a href="#myPopupDialog" data-rel="popup" data-position-to="window" data-transition="fade" class="ui-btn ui-corner-all ui-shadow ui-btn-inline" onclick="document.body.style.overflowY = 'hidden'">>Open Dialog Popup</a>

还有你的返回按钮

<a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b ui-icon-back ui-btn-icon-left" data-rel="back" onclick="document.body.style.overflowY = 'visible'">Go Back</a>

您还可以为您的容器 div 添加一个 id，并将按钮上的 onclick 函数更改为 onclick="document.getElementById("containerID").style.overflow = 'hidden'"; 和 onclick="document.getElementById("containerID").style.overflow = 'visible'";

【讨论】：

我认为auto 而不是visible 是更好的选择。
我是否需要在返回按钮上有该代码？因为我使用的其他代码实际上关闭了弹出窗口，而不仅仅是返回到最后一页
如何将它传递给 javascript 而不是从按钮调用它？

【解决方案2】：

您可以将body 溢出设置为隐藏，如下所示：

$(body).css("overflow", "hidden");

要返回滚动条，只需使用：

$(body).css("overflow", "auto");

希望对你有帮助。

【讨论】：