我想創建一個網站。有多個部分，寬度為100vw，高度為100vh.我還想為這些部分設定一個強制性的y（垂直）快照。我已經查看了許多教程，但我的代碼似乎并不奏效。非常感謝任何幫助。
當前代碼
。span class="hljs-selector-tag">body {
width: 100%;
margin: 0;
background-color: white;
}
body .content {
width: 100vw;
height: 100%。
scroll-snap-type: mandatory;
scroll-snap-points-y: repeat（300px）。
scroll-snap-type: y mandatory;
}
body .content section {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
border: 1px solid black;
scroll-snap-align: start;
}<div class='content'> /span>
<section>1</section>/span>
<section>/span>2</section>/span>
<section>/span>3</section>/span>
<section>/span>4</section>/span>
</div>/span>uj5u.com熱心網友回復：
僅僅閱讀Mozilla docs就會發現，這個功能在不同的瀏覽器之間非常不一致，但根據他們的指導，我設法通過這些改變使你的代碼段作業：
body .content {
height: 100vh; /*原為100% */
overflow: auto; /* 添加 */
}
span class="hljs-selector-tag">body {
width: 100%;
margin: 0;
background-color: white;
}
body .content {
width: 100vw;
height: 100vh;
scroll-snap-points-y: repeat（300px）。
scroll-snap-type: y mandatory;
scroll-snap-type: mandatory;
overflow: auto;
}
body .content section {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
border: 1px solid black;
scroll-snap-align: start;
}<div class='content'> /span>
<section>1</section>/span>
<section>/span>2</section>/span>
<section>/span>3</section>/span>
<section>/span>4</section>/span>
</div>/span>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/333021.html
標籤：