CSS-页面滑屏滚动原理_html/css_WEB-ITnose

现在的网站有的时候为了简洁就是很多的单页滑屏滚动介绍，主要呈现方式有两种，一种是整体的元素一直排列下去，假设有五个需要展示的全屏页面，那么高度是500%，只是展示100%，剩下的可以通过transform进行Y轴定位，也可以通过margin-top实现，第二种就是所有的子元素和页面一样，都显示在当前页面，简单的实现第一种页面。

Html代码:

　页面样式:

    html,    body {        height: 100%;        padding: 0px;        margin: 0px;    }        .container {        height: 100%;        overflow: hidden;    }        .wrapper {        height: 100%;        touch-action: none;        transition: all 1000ms ease;    }        .page {        height: 100%;        width: 100%;    }        .page0 {        background: #551A8B;    }        .page1 {        background: #FF8247;    }        .page2 {        background: #CD919E;    }        .page3 {        background: #98FB98;    }

鼠标滑动控制代码，如果需要获取鼠标的滚轮事件可以直接通过JavaScript，也可以通过query.mousewheel.min.js插件来写,原生态的JS:

/** This is high-level function. * It must react to delta being more/less than zero. */function handle(delta) {        if (delta         
　通过JavaScript插件控制控制滚动的代码:
    
          
    
        
关于滚轮的时间的控制，以及不确定页面元素时候的代码没有给出判断，大体思路不变，其他的仅供参考~