Dome小练习之JS整屏滚动"/>
前端Dome小练习之JS整屏滚动
直接上代码了，祝君多多练习年入百万
<!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').lengthconst 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 += pageHcontainer.style.transform = `translateY(${ -containerScrollTop }px)`}}function isReachBot() {return containerScrollTop === (pageCount - 1) * pageH}function prevPage() {if (containerScrollTop > 0) {containerScrollTop -= pageHcontainer.style.transform = `translateY(${ -containerScrollTop }px)`}}</script></body>
</html>
更多推荐
前端Dome小练习之JS整屏滚动
发布评论