页面整屏滚动效果

一只金牛座的崽

已于 2022-10-31 14:31:04 修改

阅读量666

点赞数

分类专栏： css 文章标签： javascript 前端 css

于 2022-07-26 16:14:45 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43456275/article/details/125995406

版权

css 专栏收录该内容

9 篇文章

订阅专栏

效果展示

屏幕整屏滚动

代码实现

<!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>