CSS實現(xiàn)頁面滾動一整頁效果是很常見且簡單的技巧,它可以讓網(wǎng)頁在用戶滾動時自動滾動到下一整頁或上一整頁,提高用戶體驗。下面是實現(xiàn)該效果的CSS代碼:
html { scroll-behavior: smooth; } body { height: 100vh; /* 讓body元素高度等于瀏覽器可視窗口高度 */ overflow-y: scroll; /* 添加垂直滾動條 */ } section { height: 100vh; /* 讓每個section元素高度等于瀏覽器可視窗口高度 */ }
首先,在html元素中設(shè)置scroll-behavior為smooth,表示平滑滾動。接下來,在body元素中設(shè)置height為100vh,讓其高度等于瀏覽器可視窗口高度,并添加垂直滾動條。最后,在每個需要滾動的區(qū)域(比如section)中設(shè)置height為100vh,讓其高度也等于瀏覽器可視窗口高度。
這樣,當(dāng)用戶點擊頁面鏈接或滾輪滾動時,頁面將平滑地滾動到下/上一整頁。