如何防止Chrome（iOS）滚动超过页面底部？

问题描述 投票：0回答：1

条件

我有一个相当简单的网站布局，由粘性标题、主要内容和粘性页脚组成。

粘性页眉和页脚具有固定高度，主要内容占据剩余空间。

如果主要内容需要的空间超过可用空间，则会导致 html 节点溢出并显示滚动条。

最小化复制

这是下面 StackBlitz 示例的无样式版本。

<html>
   <body>
      <header style="position: sticky; top: 0; height: 80px">Header</header>

      <main>
         <p>0</p>
         <p>1</p>
         <p>2</p>
         <p>3</p>
         <p>4</p>
         <p>5</p>
         <p>6</p>
         <p>7</p>
         <p>8</p>
         <p>9</p>
         <p>10</p>
         <p>11</p>
         <p>12</p>
         <p>13</p>
         <p>14</p>
         <p>15</p>
         <p>16</p>
         <p>17</p>
         <p>18</p>
         <p>19</p>
         <p>20</p>
      </main>

      <footer style="position: sticky; bottom: 0; height: 80px">Footer</footer>
   </body>
</html>

期望

当我向下滚动时，我希望浏览器到达页面底部并停止滚动。页脚应该是页面上显示的最后一个元素，直接与浏览器自己的控件接壤。

我还希望浏览器能够处理这个问题，而无需我应用额外的 CSS 或 JavaScript 来强制浏览器以某种方式运行。诸如过度滚动之类的行为是预期的，甚至是必需的。

这些期望在 MacOS（Chrome、Safari、Firefox）和 iOS（Safari、Firefox）上得到满足。

Safari 中的行为 (iOS)

问题

它在 iOS 版 Chrome 中不起作用（我的例子是版本 111.0.5563.72）。一旦滚动到页面底部，浏览器将滚动经过页面并显示空白区域。

该空间将具有 html 节点的背景颜色，并且与视口的高度大致相同。

我已经尝试过基于 CSS 和 JavaScript 应用多种不同的潜在解决方案，但没有成功。

Chrome 中的行为 (iOS)

演示

我提供了一个 StackBlitz 存储库，可用于重现此行为。

要亲自测试，请在 iOS 版 Chrome 中打开此链接：https://js-jetsg3.stackblitz.io

点击此链接查看源代码：https://stackblitz.com/edit/js-jetsg3

在测试我的生产应用程序和演示时，我注意到它很少真正按照我期望的方式运行，只是在一两次刷新后它会恢复到正常行为。

问题

如何防止 Chrome 滚动到页面底部？

如果对这种特定行为无能为力，当 Chrome 滚动到屏幕底部时，可以采取什么措施将页脚保持在页面的最底部？

html css ios google-chrome scroll
1个回答
0
投票

您找到解决方案了吗？我也有同样的问题

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.