css3页面滚动加载内容

随着移动设备和触控屏的普及，用户对于网站的上下滚动方式越来越追求流畅。CSS3提供了一种滚动加载内容的方式，使得网站的用户体验得到了一定程度的提升。

 body {
        height: 100%;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
    } 

通过设置body元素的overflow-y属性值为scroll，使得页面可以在垂直方向上出现滚动条。而通过设置-webkit-overflow-scrolling属性值为touch，则可以在iOS设备上启用丝滑的滚动效果。

 @keyframes fade-in {
        0% {
            opacity: 0;
            transform: translateY(50%);
        }
        100% {
            opacity: 1;
            transform: translateY(0%);
        }
    }
    
    .fade-in {
        opacity: 0;
        animation-name: fade-in;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
        animation-timing-function: ease-out;
    } 

在需要加载的内容中，可以使用CSS3的动画效果来实现滚动加载的效果。这里以淡入淡出的效果为例，定义了一个名为fade-in的类，并设置了动画的关键帧以及效果时间、填充模式和缓动函数。

在页面滚动到目标内容的位置时，再通过JavaScript动态地为需要加载的内容添加fade-in类，从而实现内容的渐显效果。

总的来说，CSS3的页面滚动加载内容的方式，不仅可以提升用户的体验，还可以通过动画效果来使得页面更加美观和生动。