全屏滾動是一種常見的網頁交互方式，通過CSS實現會更加的輕便簡單。下面我們通過CSS的屬性來了解全屏滾動的原理。

html,
body {
height: 100%; /*設置body高度為100%*/
margin: 0; /*去掉body默認邊距*/
overflow: hidden; /*去掉滾動條*/
}
.section { /*設置每一屏的高度為100%*/
height: 100%;
}
.section:nth-child(1) {
background-color: #f00; /*設置第一屏的背景顏色*/
}
.section:nth-child(2) {
background-color: #0f0; /*設置第二屏的背景顏色*/
}
.section:nth-child(3) {
background-color: #00f; /*設置第三屏的背景顏色*/
}

通過以上代碼，我們可以實現每一屏都是全屏的效果。接下來，我們需要把每一屏的內容放進去。我們可以通過CSS的屬性transform，來實現內容從上往下滾動的效果。

.section >* { /*選擇每一屏的直接子元素*/
position: relative; /*放置容器需要定位*/
}
.section >*:first-child {
transform: translateY(-100%); /*設置第一屏的位置偏移*/
transition: transform 0.5s; /*設置滾動時間*/
}
.section.active >*:first-child { /*給激活頁面添加狀態*/
transform: translateY(0%);
}

通過以上代碼，我們給每一屏的第一個子元素設置從上往下偏移的效果，并通過CSS的屬性transition設置了時間。最后，我們通過給激活頁面添加狀態，來實現滾動效果。