分类导航

程序问答发布时间：2022-06-01 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了iOS 和 Safari 中的网站滚动到顶部控件/载体栏 - 如何停止？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决iOS 和 Safari 中的网站滚动到顶部控件/载体栏 - 如何停止？？

开发过程中遇到iOS 和 Safari 中的网站滚动到顶部控件/载体栏 - 如何停止？的问题如何解决？下面主要结合日常开发的经验，给出你关于iOS 和 Safari 中的网站滚动到顶部控件/载体栏 - 如何停止？的解决方法建议，希望对你解决iOS 和 Safari 中的网站滚动到顶部控件/载体栏 - 如何停止？有所启发或帮助；

我正在使用 React 构建一个用于工作的网站，并有一个带有 position: sticky / position: -webkit-sticky 的顶部标题栏。它在计算机和 AndroID 上的 Chrome 中看起来不错，但在 iOS 和 Mac 上的 Safari 中，网站内容溢出到顶部载体栏 (iOS) / 控制栏 (maC)。我还没有找到防止这种情况发生的方法。粘性标题按预期工作，问题是其余内容向上滚动。有没有人有建议？我在谷歌上看到一个 stackoverflow 提到使用 -webkit-transform: translate3d(0,0)，但没有做任何事情。

这是我目前的 Jsx：

<div classname="flex-container flex-space-between menu-page-height">
        <div>
          <Pageheader pagetitle={pagetitlE} />
          <div>
            ...more content
          </div>
        </div>
        <div>
          ...content
        </div>
        
      </div>

这是页面CSS：

.flex-container {
  padding: 0;
  margin: 0;
  List-style: none;
  display: flex;
  flex-direction: column;
}

.flex-space-between { 
  justify-content: space-between; 
  align-items: stretch;
}

.menu-page-height {
  height: 100vh;
}

这是Pageheader CSS：

.common-header-styles {
  BACkground-color: black;
  color: white;
  padding: 0.9375rem; /* 15px */
  Font-size: 1.25rem; /* 20px */
  position: sticky;
  position: -webkit-sticky;
  wIDth: 100%;
  top: 0;
  z-index:100;
  max-height: 4.0625rem; /* 65px */
}

iOS 问题的示例图片：

iOS 和 Safari 中的网站滚动到顶部控件/载体栏 - 如何停止？