Question

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

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

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

标题需要固定，因此滚动内容时标题应该一直可见。
如果内容少于内容元素的高度，则内容元素应延伸到屏幕的底部，并且不能进行滚动（当前，如果快速滚动，底部会出现额外的间隙）。
（最有趣的部分），当移动浏览器显示/隐藏/扩展/收缩其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>

Answer 1

当Safari显示/隐藏其UI栏时，可用空间的高度会更改。为了防止在显示/隐藏UI栏动画期间重新渲染每个帧上的所有布局，屏幕大小是离散的，并且仅在UI动画的结尾进行更改。因此在过程中不会重新计算百分比或vh单位

如何在移动Safari中获得统一的滚动体验？

1 个答案: