網址列/URL欄在移動Safari上滾動時保持不變
P粉768045522
2023-08-16 12:29:00
<p>我正在使用React（16.8.6）建立一個網站，但在行動Safari上，當使用者開始滾動時，它不會像其他網站那樣折疊/縮小URL欄。 </p>
<p>包裝div的CSS如下所示：</p>
<p><br /></p>
<pre class="brush:js;toolbar:false;"><ContentContainer>
<ScrollContainer>
{...otherComponentsHere}
<ScrollContainer/>
<ContentContainer/></pre>
<pre class="brush:css;toolbar:false;">const ContentContainer = styled.div`
height: 100%; /*允許兩個欄位佔據瀏覽器視窗的整個高度*/
overflow-y: auto;
flex-grow: 1;
display: flex;
flex-direction: column;
`;
const ScrollContainer = styled.div`
flex: 1;
`;</pre>
<p><br /></p>
<p>App.css如下：</p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">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;
}</pre>
<p><br /></p>
<p>我正在嘗試找出這個CSS中的問題，它阻止了Safari URL欄在用戶滾動時折疊。非常感謝您的幫忙。 </p>
要在移動Safari中折疊/收縮URL欄，您必須使您的
body溢出視口，但這裡並非如此：您的body不可滾動，而且您的ContentContainer完全位於視窗中。要測試這個，請建立一個沒有CSS的新頁面，並將足夠的內容放入
body中以使頁面可捲動。