无法滚动到底部

Posted 2023-03-12

【中文标题】无法滚动到底部

【英文标题】：Cannot scroll to bottom

【发布时间】：2013-05-17 16:21:06

【问题描述】：

我有以下 jQuery 移动页面：

<div id="performMeasurementPage" data-role="page">
 <div data-role="header" role="banner" data-position="fixed" data-theme="b">
  <h1>Measurement</h1>
  <a data-role="button" data-direction="reverse" data-rel="back" href="" data-icon="arrow-l" data-iconpos="left">Care Plan </a>
 </div>
 <div data-role="content">
  <div data-content-theme="d">
   <form id="measurementForm" action="#performMeasurementPage">
    <h3>Blood Pressure</h3>
    <label for="systolic"><em>* </em>Systolic:</label>
    <input type="number" name="systolic" id="systolic" />
    <label for="diastolic">Diastolic:</label>
    <input type="number" name="diastolic" id="diastolic" />
    <fieldset class="ui-grid-a">
     <div class="ui-block-a">
      <h3>Temperature:</h3>
     </div>
     <div class="ui-block-b">
      <input type="number" name="temperature" id="temperature" data-theme="b"></input>
     </div>
    </fieldset>
    <div data-role="fieldcontain">
     <label for="slider">
      <h3>Weight:</h3>
     </label>
     <input type="range" name="slider" id="slider" value="50" min="50" max="300" />
    </div>
    <button id="doneMeasurement" type="button" data-theme="b">Done</button>
   </form>
  </div>
 </div>
 <div data-role="footer" class="ui-frame ui-frame-footer" id="footer" data-position="fixed" data-theme="b">
  <h1> Footer </h1>
 </div>
</div>

并且此页面的 javascript 仅分配文本框的点击事件和验证。现在，除非我专注于任何一个文本框，否则内容滚动得很好。键盘弹出并按“完成”后，内容无法再滚动，并将页面捕捉到顶部。

另外，需要注意的是，这种行为在 android 和 ios 中都会重复出现。

我将不胜感激任何类型的帮助。

【参考方案1】：

iOS 和 Android 的浏览器都以 WebKit 为核心。因此，Mobile Safari 中的错误有时也会出现在 Android 浏览器（Chrome？）中。

也许通过在 Mobile Firefox 中尝试来隔离问题会有所帮助。它不使用 WebKit。这将确定是浏览器错误还是您的代码有问题。

【讨论】：

感谢您的评论。然而，我正在申请 Phonegap/Cordova。我想我只需复制并粘贴一页，看看它的表现如何。