原生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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="../common/reset.css">
<link rel="stylesheet" href="css/index.css">
<title>全屏滚动</title>
</head>
<body>
<div class="container">
<div class="full_page">
<div class="full_page_item home">
第1页
</div>
<div class="full_page_item info">
第2页
</div>
<div class="full_page_item skill">
第3页
</div>
<div class="full_page_item project">
第4页
</div>
<div class="full_page_item contact">
第5页
</div>
</div>
<ul class="slider_tab">
<li>
<div class="small_tab active">
<img class="select" src="img/icons/home.png" alt="" />
</div>
</li>
<li>
<div class="small_tab">
<img src="img/icons/person.png" alt="" />
</div>
</li>
<li>
<div class="small_tab">
<img src="img/icons/skill.png" alt="" />
</div>
</li>
<li>
<div class="small_tab">
<img src="img/icons/project.png" alt="" />
</div>
</li>
<li>
<div class="small_tab">
<img src="img/icons/pen.png" alt="" />
</div>
</li>
</ul>
<div class="next_page">
<img src="img/icons/arrow_down.png" alt="下三角" srcset="">
</div>
</div>
<script src="js/fullPage.js"></script>
<script src="js/index.js"></script>
</body>
</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()
}
图片
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。