js实现屏幕滚动

最新推荐文章于 2025-06-17 14:58:29 发布

原创最新推荐文章于 2025-06-17 14:58:29 发布 · 4.4k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#屏幕滚动

前端专栏收录该内容

3 篇文章

订阅专栏

本文探讨了全屏滚动的原理，主要利用CSS中的position属性将元素相对于浏览器窗口定位，并通过监听鼠标中键滚动事件，调整子元素的top值来切换显示的模块。同时，为了防止频繁滚动，还加入了延时处理机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

全屏滚动的原理是什么?,用到了css的哪些属性.

使用position设置成relative,基于浏览器窗口定位.浏览器显示的只有这个模块.再它里面有三个全屏的子标签,通过鼠标中键的滚动监听事件,设置三个标签top值.来设置显示哪个模块.再设置延时操作,防止多次滚动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html,body{
            margin:0;
            padding:0;
            overflow: hidden;
        }
       #pageContainer{
            position:relative;
            top:0;
            transition: all 1000ms ease;
            touch-action:none;
        }
        .pageItem{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            border: 1px solid #ddd;
        }
    </style>
    
</head>
<body>
    <div id="pageContainer">
        <div class="pageItem">1</div>
        <div class="pageItem">2</div>
        <div class="pageItem">3</div>
    </div>
</body>
<script>
        //获取整个对象
        var container = document.getElementById("pageContainer");
        //获取元素的高度,页面可视高度
        var viewHeight = document.documentElement.clientHeight;
        console.log(container)
        //获取滚动的页数
        console.log(document.getElementsByClassName("pageItem"))
        var pageNum = document.getElementsByClassName("pageItem").length;
        //初始化当前位置
        var currentPosition = 0;
        //设置页面高度
        container.style.height = viewHeight + 'px';
        // container.style.height = "height:"+viewHeight+'px'
        
        // 向上向下的操作
        function goDown(){
            if (currentPosition > -viewHeight * (pageNum - 1)) {
                currentPosition = currentPosition - viewHeight;
                container.style.top = currentPosition + 'px';
                console.log(1234);
            }
        }
    
        function goUp(){
            if (currentPosition < 0){
                currentPosition = currentPosition + viewHeight;
                container.style.top = currentPosition + "px"
            }
        }

        //防止用户多次滚动的延时,使用到了闭包
        function throttle(fn,delay){
            let baseTime = 0;
            return function(){
                const currentTime= Date.now()
                if (baseTime + delay < currentTime){
                    fn.apply(this,arguments)
                    baseTime = currentTime
                }
            }
        }
        // 绑定事件  fireFox 的滑动事件不同,做出区别
        var handlerWheel = throttle(scrollMove,1000)
        if(navigator.userAgent.toLowerCase().indexOf('fireFox') === -1){
            document.addEventListener("mousewheel",handlerWheel)
        }else{
            document.addEventListener("DOMMouseScroll",hanlerWheel)
        }
        function scrollMove(e){
            if(e.deltaY > 0){
                console.log(e.deltaY)
                goDown()
            }else{
                goUp()
            }
        }
        </script>
</html>