網址列/URL欄在移動Safari上滾動時保持不變

Question

我正在使用React（16.8.6）建立一個網站，但在行動Safari上，當使用者開始滾動時，它不會像其他網站那樣折疊/縮小URL欄。

包裝div的CSS如下所示：

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

const ContentContainer = styled.div`
  height: 100%; /*允許兩個欄位佔據瀏覽器視窗的整個高度*/
  overflow-y: auto;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
`;
const ScrollContainer = styled.div`
  flex: 1;
`;

App.css如下：

html {
  height: 100%;
  min-height: 100vh;
}

body {
  font-family: 'Work Sans', 'Courier New', sans-serif;
  min-height: 100%;
  height: 100%;
  margin: 0px;
}
#app {
  height: 100%;
}

#root {
  height: 100%;
  display: flex;
  overflow: hidden; /*使body不可滾動*/
  box-sizing: border-box;
}

我正在嘗試找出這個CSS中的問題，它阻止了Safari URL欄在用戶滾動時折疊。非常感謝您的幫忙。

Answer 1

要在移動Safari中折疊/收縮URL欄，您必須使您的body溢出視口，但這裡並非如此：您的body不可滾動，而且您的ContentContainer完全位於視窗中。

要測試這個，請建立一個沒有CSS的新頁面，並將足夠的內容放入body中以使頁面可捲動。