全屏滾動(dòng)是一種常見的網(wǎng)頁交互方式，通過CSS實(shí)現(xiàn)會(huì)更加的輕便簡(jiǎn)單。下面我們通過CSS的屬性來了解全屏滾動(dòng)的原理。

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

通過以上代碼，我們可以實(shí)現(xiàn)每一屏都是全屏的效果。接下來，我們需要把每一屏的內(nèi)容放進(jìn)去。我們可以通過CSS的屬性transform，來實(shí)現(xiàn)內(nèi)容從上往下滾動(dòng)的效果。

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

通過以上代碼，我們給每一屏的第一個(gè)子元素設(shè)置從上往下偏移的效果，并通過CSS的屬性transition設(shè)置了時(shí)間。最后，我們通過給激活頁面添加狀態(tài)，來實(shí)現(xiàn)滾動(dòng)效果。