css全屏滚动的原理是什么

CSS全屏滚动可以让网页内容在页面中全屏展示，并且通过滚动条来控制页面的滚动。具有不错的视觉效果和用户交互性，是现今网页设计中广泛运用的技术之一。

html,body {
    height: 100%;
    overflow: hidden;
}
section {
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
    transition: all 0.5s ease-out;
}
section:first-child {
    transform: translateY(0%);
}
section:nth-child(2) {
    transform: translateY(-100%);
}
section:nth-child(3) {
    transform: translateY(-200%);
}
......

实现CSS全屏滚动的关键在于通过CSS的定位属性，将每个滚动页面设置成绝对定位，然后利用CSS3的过渡效果来实现页面的平滑过渡。

首先在html和body元素中设置高度为100%，以便让每个子页面充满整个浏览器的页面区域。然后，利用overflow:hidden隐藏滚动条，避免出现多余的滚动。

在每个子页面中，设置高度和宽度均为100%，在整个页面中占据整个空间。利用position:relative属性来让设置后续的绝对定位生效。overflow:hidden属性用于隐藏页面内容的多余部分，防止出现滚动条。

通过CSS3的过渡效果和transform属性，设置每个子页面的位置和过渡效果。在第一个子页面中，transform属性中translateY(0%)让页面默认位置为顶部。后续的子页面，通过设置translateY属性值来向上偏移，实现视差滚动的效果。transition属性用于指定子页面在滚动时的过渡效果，这里设定为0.5s，并指定过渡的速度为ease-out。

最后，在JS中利用jQuery等框架监听鼠标滚轮事件，来控制页面的滑动方向和位置变化。