fullpage demo
<!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">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#container {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 99999;
overflow: hidden;
}
.slide1 {
background-color: rgb(27, 188, 155);
}
.slide2 {
background-color: rgb(255, 153, 0);
}
.slide3 {
background-color: rgb(123, 170, 190);
}
</style>
</head>
<body>
<div id="container">
<div id="scrollContainer">
<div style="height: 0;" class="slide slide1"></div>
<div style="height: 0;" class="slide slide2"></div>
<div style="height: 0;" class="slide slide3"></div>
</div>
</div>
<script>
let height = document.getElementById("container").offsetHeight;
let slides = document.getElementsByClassName("slide");
for (let ele of slides) {
if (ele) {
ele.style.height = `${height}px`;
}
}
let scrollEle = document.getElementById("scrollContainer");
let page = {
timeWait: 1000,
duration: 850,
current: 1,
len: 3,
isScrolling: false,
next: function () {
if ((this.current + 1) <= this.len) {
this.current += 1;
this.move(this.current);
}
},
pre: function () {
if (this.current - 1 > 0) {
this.current -= 1;
this.move(this.current);
}
},
move: function (index) {
this.isScrolling = true;
let di = -(index - 1) * height + 'px';
// page.start = +new Date();
scrollEle.style.cssText= `transition: all ease ${this.duration / 1000}s;transform: translateY(${di})`
// $scroll.css('transform', 'translateY(' + di + ')');
setTimeout(() => {
this.isScrolling = false;
}, this.timeWait);
}
};
// 滾動事件綁定
function bindMouseWheel(page) {
let type = 'mousewheel';
let deltaY = 0;
function mouseWheelHandle(event) {
// console.log("滾輪事件");
if (page.isScrolling) { // 加鎖部分
return false;
}
let e = event.originalEvent || event;
console.log("e:{}", e.deltaY);
deltaY = e.deltaY;
if (deltaY > 0) {
page.next();
} else if (deltaY < 0) {
page.pre();
}
}
document.addEventListener('mousewheel', mouseWheelHandle, true);
// $(document).on('mousewheel', mouseWheelHandle);
}
bindMouseWheel(page);
</script>
</body>
</html>
兼容性沒有測試