js--整页滚动

最新推荐文章于 2024-07-26 11:22:40 发布

神以灵

最新推荐文章于 2024-07-26 11:22:40 发布

阅读量2k

点赞数 1

分类专栏：【杂记】文章标签：整页滚动 one page scroll

本文链接：https://blog.csdn.net/juzipidemimi/article/details/72961938

版权

【杂记】专栏收录该内容

37 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>整页滚动</title>
        <style>
            body {
                overflow: hidden;
                padding: 0;
                margin: 0;
            }

            .container {
                transition: transform 1s ease-in;
            }

            .page {
                height: 100vh;
                font-size: 80px;
                color: #fff;
                font-weight: 600;
                text-align: center;
                line-height: 100vh;
            }

            .page-1 {
                background:#00ffa1;
            }
            .page-2 {
                background:#bcf1ae;
            }
            .page-3 {
                background:#dab573;
            }
            .page-4 {
                background:#c3d86d;
            }
        </style>
	</head>
	<body>
        <div class="container">
            <div class="page page-1">1</div>
            <div class="page page-2">2</div>
            <div class="page page-3">3</div>
            <div class="page page-4">4</div>
        </div>
		
		<script>
            const container = document.querySelector('.container') // container of pages
            const pageH = window.innerHeight // height of one page
            const pageCount = document.querySelectorAll('.page').length

            const scrollDuation = 1e3 // 1s
            let containerScrollTop = 0 // scrollTop of container

            const onePageScrollHandler = throttle(onePageScroll, scrollDuation)
            window.addEventListener('wheel', onePageScrollHandler)

            function onePageScroll(evt) {
                const direction = evt.wheelDelta < 0 ? 'down' : 'up' // direction of scroll
                if (direction === 'down') { // scroll to next page
                    nextPage()
                }

                if (direction === 'up') { // scroll to prev page
                    prevPage()
                }
            }

            function throttle(fn, delay) { // 函数节流：防止频繁触发
                let execTime = 0 // exec time of wheel-handler
                return function () {
                    const curTime = Date.now()
                    if (execTime + delay < curTime) {
                        fn.apply(this, arguments)
                        execTime = curTime
                    }
                }
            }

            function nextPage() {
                if ( !isReachBot() ) {
                    containerScrollTop += pageH
                    container.style.transform = `translateY(${ -containerScrollTop }px)`
                }
            }

            function isReachBot() {
                // if container is scroll to bot.
                return containerScrollTop === (pageCount - 1) * pageH
            }

            function prevPage() {
                if (containerScrollTop > 0) {
                    containerScrollTop -= pageH
                    container.style.transform = `translateY(${ -containerScrollTop }px)`
                }
            }
        </script>
	</body>
</html>