前端Dome小练习之JS整屏滚动

最新推荐文章于 2023-05-13 09:45:26 发布

一只呆库里

最新推荐文章于 2023-05-13 09:45:26 发布

阅读量359

点赞数 1

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

本文链接：https://blog.csdn.net/m0_46877157/article/details/126441671

版权

前端小Demo 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

直接上代码了，祝君多多练习年入百万

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

            .container {
                transition: transform .5s 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') 
            const pageH = window.innerHeight 
            const pageCount = document.querySelectorAll('.page').length

            const scrollDuation = 1e3 
            let containerScrollTop = 0 

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

            function onePageScroll(evt) {
                const direction = evt.wheelDelta < 0 ? 'down' : 'up' 
                if (direction === 'down') { 
                    nextPage()
                }

                if (direction === 'up') { 
                    prevPage()
                }
            }

            function throttle(fn, delay) { // 函数节流：防止频繁触发
                let execTime = 0 
                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() {
                return containerScrollTop === (pageCount - 1) * pageH
            }

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