全屏滚动原理

最新推荐文章于 2025-05-27 23:34:30 发布

原创最新推荐文章于 2025-05-27 23:34:30 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

89 篇文章

订阅专栏

本文将深入探讨全屏滚动（Full Page Scrolling）的原理，包括如何利用CSS和JavaScript来创建平滑的滚动效果，以及如何实现页面锚点链接与滚动同步。我们将讨论关键的技术细节，如滚动事件监听、滚动定位计算以及性能优化策略。

        html,
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        .page {
            width: 100%;
        }

        .page:nth-of-type(1) {
            background-color: orange;
        }

        .page:nth-of-type(2) {
            background-color: skyblue;
        }

        .page:nth-of-type(3) {
            background-color: pink;
        }

        .page:nth-of-type(4) {
            background-color: darkgray;
        }

    <div id="wrap">
        <div class="page"></div>
        <div class="page"></div>
        <div class="page"></div>
        <div class="page"></div>
    </div>

        fullScroll('wrap')
        function fullScroll(id) {
            const wrap = document.getElementById(id)
            const height = document.documentElement.clientHeight
            let timer = { start: 0, end: 0, count: 0 }

            for (let i = 0, len = wrap.children.length; i < len; i++) {
                wrap.children[i].style.height = height + 'px'
            }

            let scrollFun = (e) => {
                if (e.wheelDelta === 0) return
                let dir = Boolean(e.wheelDelta < 0)
                timer.start = Date.now()

                if (timer.start - timer.end > 1000) {
                    timer.end = Date.now()
                    let y;

                    if (dir) {
                        if (timer.count < wrap.children.length) {
                            y = height * (++timer.count)
                            window.scrollTo({
                                top: y,
                                behavior: "smooth"
                            })
                        }
                    } else {
                        if (timer.count > 0) {
                            y = height * (--timer.count)
                            window.scrollTo({
                                top: y,
                                behavior: "smooth"
                            })
                        }
                    }
                }
            }

            if (navigator.userAgent.toLowerCase().indexOf("firefox") != -1) {
                document.addEventListener("DOMMouseScroll", scrollFun);
            } else if (document.addEventListener) {
                document.addEventListener("mousewheel", scrollFun, false);
            } else if (document.attachEvent) {
                document.attachEvent("onmousewheel", scrollFun);
            } else {
                document.onmousewheel = scrollFun;
            }
        }