Die Adressleiste/URL-Leiste bleibt beim Scrollen in der mobilen Safari unverändert

Question

Ich erstelle eine Website mit React (16.8.6), aber beim mobilen Safari wird die URL-Leiste nicht minimiert/verkleinert, wenn der Benutzer mit dem Scrollen beginnt, wie es bei anderen Websites der Fall ist.

Das CSS für das Wrapping-Div sieht folgendermaßen aus:

<ContentContainer>
    <ScrollContainer>
        {...otherComponentsHere}
    <ScrollContainer/>
<ContentContainer/>

const ContentContainer = styled.div`
  Höhe: 100 %; /*Erlaube zwei Spalten, die gesamte Höhe des Browserfensters einzunehmen*/
  Überlauf-y: auto;
  Flexwachstum: 1;
  Anzeige: Flex;
  Flexrichtung: Spalte;
`;
const ScrollContainer = styled.div`
  Flex: 1;
`;

App.css sieht so aus:

html {
  Höhe: 100 %;
  Mindesthöhe: 100 Vh;
}

Körper {
  Schriftfamilie: „Work Sans“, „Courier New“, serifenlos;
  Mindesthöhe: 100 %;
  Höhe: 100 %;
  Rand: 0px;
}
#app {
  Höhe: 100 %;
}

#Wurzel {
  Höhe: 100 %;
  Anzeige: Flex;
  Überlauf: versteckt; /*Den Text nicht scrollbar machen*/
  Boxgröße: border-box;
}

Ich versuche ein Problem in diesem CSS herauszufinden, das verhindert, dass die Safari-URL-Leiste beim Scrollen des Benutzers ausgeblendet wird. Ich danke Ihnen für Ihre Hilfe.

Answer 1

要在移动Safari中折叠/收缩URL栏，您必须使您的body溢出视口，但这里并非如此：您的body不可滚动，而且您的ContentContainer完全位于视口中。

要测试这个，请创建一个没有CSS的新页面，并将足够的内容放入body中以使页面可滚动。