原生js实现全屏滚动
fullPage.js
function fullPage() { const fullPage = document.getElementsByClassName("full_page")[0]; const fullPageItems = fullPage.getElementsByClassName("full_page_item"); const sliderTab = document.getElementsByClassName("slider_tab")[0]; const sliderTabItems = document.getElementsByTagName("li"); const sliderTabDivs = document.getElementsByClassName("small_tab"); const sliderTabImgs = sliderTab.getElementsByTagName("img"); const nextPage = document.getElementsByClassName("next_page")[0]; let pageIndex = 0, pageScroll = true, prevIndex = 0; document.onmousewheel = mouseWheel; document.addEventListener("DOMMouseScroll", mouseWheel) // 点击箭头，实现下一页 nextPage.onclick = scrollDown sliderTabClick() // 滚轮事件 function mouseWheel(e) { if(e.wheelDelta) { if(e.wheelDelta > 0) { scrollUp() } else { scrollDown() } } else { if(e.detail > 0) { scrollDown() } else { scrollUp() } } } // 上滑 function scrollUp() { if(pageIndex > 0 && pageScroll) { prevIndex = pageIndex; pageIndex --; srcollToPage(pageIndex, prevIndex) } else if(pageIndex <= 0) { pageIndex = 0 } } // 下滑 function scrollDown() { if(pageIndex < fullPageItems.length - 1 && pageScroll) { prevIndex = pageIndex; pageIndex ++; srcollToPage(pageIndex, prevIndex) } else if(pageIndex >= fullPageItems.length - 1) { pageIndex = fullPageItems.length - 1 } } // 滚动到对应页 function srcollToPage(pageIndex, prevIndex) { fullPage.style.top = - pageIndex * 100 + "%"; fullPage.style.transition = `all ease-in ${(Math.abs(pageIndex - prevIndex) - 1)/2 + .3}s` sliderTabSelect(pageIndex) pageScroll = false scrollTimer() if(pageIndex == sliderTabItems.length -1) { nextPage.style.opacity = "0" } else { nextPage.style.opacity = "1" } } // 定时器 解决函数连续执行 function scrollTimer() { setTimeout(function() { pageScroll = true }, 500) } // 页面滚动，导航对应变化 function sliderTabSelect(index) { for(let i = 0; i < sliderTabDivs.length; i ++) { sliderTabDivs[i].classList.remove("active"); sliderTabImgs[i].classList.remove("select"); } sliderTabDivs[index].classList.add("active"); sliderTabImgs[index].classList.add("select") } // 点击导航，页面滚动 function sliderTabClick() { for(let i = 0; i < sliderTabItems.length; i ++) { sliderTabItems[i].onclick = function () { if(i > pageIndex) { fullPage.style.top = - (i - 1) * 100 + "%"; } else { fullPage.style.top = - (i + 1) * 100 + "%"; } srcollToPage(i, pageIndex) pageIndex = i } } } } html部分--index.html
全屏滚动
css部分--index.css
/* 容器 */ .container { width: 100%; height: 100vh; overflow: hidden; position: relative; } /* 全屏滚动容器 */ .full_page { width: 100%; height: 500%; /* overflow: hidden; */ position: absolute; top: 0; left: 0; } .full_page_item { width: 100%; height: 20%; position: relative; } .home { background: url(../img/bg.png) #87b0a5; } .info { background: url(../img/bg.png) #109085; } .skill { background: url(../img/bg.png) #a29971; } .project { background: url(../img/bg.png) #788990; } .contact { background: url(../img/bg.png) #999; } /* 全屏滚动tab */ .slider_tab { position: fixed; top: 50%; right: 30px; margin-top: -150px; } .slider_tab li { width: 50px; height: 50px; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; cursor: pointer; } .slider_tab li div { width: 15px; height: 15px; background: #f0f0f0; border-radius: 50%; } .slider_tab li div.active { width: 50px; height: 50px; background: #666; transition: all .3s; } .slider_tab li div img { width: 60%; height: 60%; padding-top: 20%; padding-left: 20%; display: none; } .slider_tab li div img.select { display: block; } /* 下一页 */ .next_page { width: 30px; height: 30px; position: fixed; left: 50%; margin-left: -15px; cursor: pointer; animation:jump .8s infinite; -moz-animation:jump .8s infinite; /* Firefox */ -webkit-animation:jump .8s infinite; /* Safari and Chrome */ -o-animation:jump .8s infinite; /* Opera */ } .next_page img { width: 100%; } @keyframes jump { 0% {bottom:70px;} 100% {bottom:55px;} } @-moz-keyframes jump /* Firefox */ { 0% {bottom:70px;} 100% {bottom:55px;} } @-webkit-keyframes jump /* Safari 和 Chrome */ { 0% {bottom:70px;} 100% {bottom:55px;} } @-o-keyframes jump /* Opera */ { 0% {bottom:70px;} 100% {bottom:55px;} } js部分--index.js
window.onload = function() { fullPage() } 图片
