iOS 上的滚动不会完全向下滚动答案

【问题标题】：Scroll on iOS does not scroll entirely downiOS 上的滚动不会完全向下滚动
【发布时间】：2022-01-29 01:03:20
【问题描述】：

我的 Web 应用程序的一部分具有垂直滚动功能。它确实在 iOS 上滚动，但是当我尝试向下滚动时，底部有一小部分会弹出滚动。当我拖动时，我看到底部的内容，但是当我释放时，它会弹出，因此滚动区域的底部变得不可用。可滚动区域绝对定位在弹性网格容器内。

<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no">
</head>
<body style="overflow:hidden;margin:0;">
<div style="display:flex;height: 100vh;background-color:yellow;">
<div style="background-color:silver;">Left
</div>
<div style="flex-grow: 1;background-color:lime;position:relative;">

<div style="position:absolute;top:0;left:0;bottom:0;right:0;overflow-y:auto; -webkit-overflow-scrolling: touch;">

<div>Line 0</div>
<div>Line 1</div>
<div>Line 2</div>
<div>Line 3</div>
<div>Line 4</div>
<div>Line 5</div>
<div>Line 6</div>
<div>Line 7</div>
<div>Line 8</div>
<div>Line 9</div>

<div>Line 10</div>
<div>Line 11</div>
<div>Line 12</div>
<div>Line 13</div>
<div>Line 14</div>
<div>Line 15</div>
<div>Line 16</div>
<div>Line 17</div>
<div>Line 18</div>
<div>Line 19</div>

<div>Line 20</div>
<div>Line 21</div>
<div>Line 22</div>
<div>Line 23</div>
<div>Line 24</div>
<div>Line 25</div>
<div>Line 26</div>
<div>Line 27</div>
<div>Line 28</div>
<div>Line 29</div>

<div>Line 30</div>
<div>Line 31</div>
<div>Line 32</div>
<div>Line 33</div>
<div>Line 34</div>
<div>Line 35</div>
<div>Line 36</div>
<div>Line 37</div>
<div>Line 38</div>
<div>Line 39</div>

</div>
</div>
</body>
</html>

在 iOS 设备上滚动到底部时，底部 4 行不可见。如果您拖动以进一步滚动，它们会出现，但滚动位置会弹回以隐藏底部的 4 行。

这是什么？如何在不添加底部额外空白的情况下解决它？

【问题讨论】：

标签： css ios scroll

【解决方案1】：

好的，我找到了问题的根源。

这里的问题是弹性容器有height: 100vh。在 iOS 设备上，这实际上比浏览器中的可见区域要大，这是由于在您滚动主页等时会导致地址栏等隐藏的机制。移动浏览器在处理此问题时使用不同的方法，但它使用vh 单元时，基本上是一团糟。

我在这个here上找到了一个提示，这个问题的解决方法似乎很简单。浏览器的可用空间有一个 webkit 特定的值，所以除了height:100vh，我们可以尝试这样设置：

<div style="height:100vh;height:-webkit-fill-available;">

这有一个大问题，虽然 - 因为这会破坏大多数其他浏览器（不是 iOS ......）上的 100vh
这是因为大多数浏览器“支持”height:-webkit-fill-available，所以它被应用而不是height: 100vh，只是它不能按预期工作。我不确定非 iOS 浏览器如何尝试使用该值，但这不是我们想要的......

还有一些研究。我发现使用height: 100% 是一个更好的解决方案，但这也需要在<body> 上设置height: 100%。

如果您仍然需要在元素上使用height: 100vh，有一个技巧可以让它在 iOS 上工作。您可以添加仅针对 iOS 的这段 CSS，因为 -webkit-touch-callout 仅在 Safari Mobile 上受支持：

body {
  margin:0;
}
.vh100 {
  height: 100vh;
}

@supports (-webkit-touch-callout: none) {
  /* CSS specific to iOS devices */
  .vh100 {
    height: -webkit-fill-available;
  }
}

<div style="background:lime;" class="vh100">
TEST
</div>

【讨论】：