html - 如何在移动 safari 上实现统一的滚动体验？

问题描述

我发现了一些关于这个问题的结果，但没有解决内容比屏幕高度短和高的屏幕的问题。

简而言之，我有这样的布局：

---------------------
|    fixed header    |
---------------------
|                    |
|                    |
|       content      |
|                    |
|                    |
......................

header 需要修复，所以在滚动内容时，header 应该一直可见。
如果内容少于内容元素的高度，则内容元素应该拉伸到屏幕底部并且不能滚动（目前，如果快速滚动，底部会出现额外的间隙）。
（最有趣的部分）当移动 safari 显示/隐藏/扩展/收缩它的 UI 元素（地址栏、底部工具栏）滚动应该表现“正常”（我知道它很难描述，但目前元素得到奇怪的偏移量）。

我已经阅读了它与使用vh单位相关的内容，但即使我根本不使用它们并使用百分比，当 safari 在滚动时扩展/收缩视口大小时，它仍然表现得很奇怪。

问题是 - 是否有一些纯 css 解决方案可以在移动 safari 上获得一致的垂直滚动体验？

PS。如果将 Web 应用程序添加到主屏幕，从而以全屏方式打开，则一切正常。

    <!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head><meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <title></title>

  <style type="text/css">

    * {
      margin: 0;
      padding: 0px;
      box-sizing: border-box;
      font-family: 'Roboto', sans-serif;
      -webkit-tap-highlight-color: transparent;
    }

    html, body {
      height: 100vh;
      width: 100%;
      /*overflow-y: hidden;*/
    }

    body {
      font-size: 12px;
      background: red;
    }

    #root {
      height: 100%;
    }

    .page-wrapper {
      height: 100%;
      min-height: 100%;
    }

    .navigation__wrapper {
      position: sticky;
      top: 0;
      margin: 0;
      z-index: 3;
      font-size: 19px;
      padding: 0 15px;
      height: 50px;
      color: #fff;
      display: flex;
      align-items: center;
      background: blue;
      width: 100%;
    }

    .content__wrapper {
      background: #fff;
      min-height: calc(100% - 50px);
    }
  </style>
</head>
<body>
  <div id="root">
    <div class="page-wrapper">
      <div class="navigation__wrapper">
        Header
      </div>
      <div class="content__wrapper">
        content
      </div>
    </div>
  </div>
</body>
</html>

标签： htmlcssmobile-safari

html - 如何在移动 safari 上实现统一的滚动体验？

问题描述

解决方案

推荐阅读