当前位置：网站首页>页面整屏滚动效果

页面整屏滚动效果

2022-07-31 13:10:00 【一只金牛座的崽】

效果展示

屏幕整屏滚动

代码实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    html,
    body {
    
        margin: 0px;
        padding: 0px;
        text-align: center;
        height: 100%;
    }

    ul {
    
        position: fixed;
        width: 100%;
        top: 0px;
    }

    ul,
    li {
    
        line-height: 100vh;
        margin: 0px;
        padding: 0px;
        list-style: none;
        font-size: 20px;
        height: 100vh;
        color: white;
        transition-duration: 1s;
    }

    li:nth-child(odd) {
    
        background: rgb(235, 171, 234);
    }

    li:nth-child(even) {
    
        background: rgb(150, 220, 244);
    }
</style>

<body>
    <ul>
        <li>第一页</li>
        <li>第二页</li>
        <li>第三页</li>
        <li>第四页</li>
        <li>第五页</li>
        <li>第六页</li>
    </ul>
</body>
<script>
    let ulDom = document.querySelector('ul')
    let liList = document.querySelectorAll('li')
    const viewHeight = document.body.clientHeight
    let index = 0;
    var lastTime = 0;
    //监听鼠标滚动
    document.addEventListener('mousewheel', function (e) {
    
        //节流
        var nowTime = Date.now();
        if (nowTime - lastTime > 2000) {
    
            // 更新时间戳
            lastTime = nowTime;
            if (e.wheelDelta < 0) {
    
                scrollEvent1()
            } else {
    
                scrollEvent1('back')
            }
        } else {
    
            console.log('阻止', );
        }
    })
    // 兼容火狐浏览器的监听事件
    document.addEventListener('DOMMouseScroll', function (e) {
    
        //节流
        var nowTime = Date.now();
        if (nowTime - lastTime > 2000) {
    
            // 更新时间戳
            lastTime = nowTime;
            // 
            if (e.detail > 0) {
    
                scrollEvent1()
            } else {
    
                scrollEvent1('back')
            }
        } else {
    
            console.log('阻止', );
        }
    })
    function scrollEvent1(behavior='forward') {
    
        if (behavior ==='forward') {
    
            if (index === liList.length-1) {
    
                return false;
            }
            index += 1
            console.log("鼠标滚轮后滚，看下一页")
            ulDom.style.top = -index * viewHeight + 'px'
        } else {
    
            if (index === 0) {
    
                return false;
            }
            index -= 1
            console.log("鼠标滚轮前滚，看上一页")
            ulDom.style.top = -index * viewHeight + 'px'
        }
    }
    console.log('mousewheel',navigator);
</script>

</html>
原网站

版权声明
本文为[一只金牛座的崽]所创，转载请带上原文链接，感谢
https://blog.csdn.net/weixin_43456275/article/details/125995406

边栏推荐

猜你喜欢

随机推荐