鼠标滚轮滚动翻页.md 3.8 KB
参考自 JS滚轮事件(mousewheel/DOMMouseScroll)了解
页面代码改造自 原生JS实现全屏滚动（无滚动条）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-size: 0;
}
.box {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
ul {
position: relative;
}
li {
width: 100%;
height: 100vh;
font-size: 30px;
position: relative;
display: flex;
justify-content: center;
text-align: center;
}
.nav {
position: fixed;
right: 2%;
top: 35%;
}
.nav li {
width: 16px;
height: 16px;
border-radius: 50%;
border: 1.5px solid #000;
margin-bottom: 5px;
}
</style>
</head>
<body>
<div class="box">
<ul style="transition: 0.5s ease; top:0;">
<li>一页面</li>
<li>二页面</li>
<li>三页面</li>
<li>四页面</li>
</ul>
</div>
<div class="nav">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script type="text/javascript">
/**
* 简易的事件添加方法封装
*/
var addEvent = (function(window, undefined) {
var _eventCompat = function(event) {
var type = event.type;
if (type == 'DOMMouseScroll' || type == 'mousewheel') {
event.delta = (event.wheelDelta) ? event.wheelDelta / 120 : -(event.detail || 0) / 3;
}
//alert(event.delta);
if (event.srcElement && !event.target) {
event.target = event.srcElement;
}
if (!event.preventDefault && event.returnValue !== undefined) {
event.preventDefault = function() {
event.returnValue = false;
};
}
/*
......其他一些兼容性处理 */
return event;
};
if (window.addEventListener) {
return function(el, type, fn, capture) {
if (type === "mousewheel" && document.mozFullScreen !== undefined) {
type = "DOMMouseScroll";
}
el.addEventListener(type, function(event) {
fn.call(this, _eventCompat(event));
}, capture || false);
}
} else if (window.attachEvent) {
return function(el, type, fn, capture) {
el.attachEvent("on" + type, function(event) {
event = event || window.event;
fn.call(el, _eventCompat(event));
});
}
}
return function() {};
})(window);
// 滚动锁
var mousewheelLock = false;
var pageIndex = 0, // 页码
pageNum = 4; // 页数
// 滚动动画时间
var scrollAnimateTime = 1200;
var oUl = document.querySelector("ul");
var navLis = document.querySelectorAll(".nav li");
navLis[pageIndex].style.background = 'black';
/** 添加鼠标滚轮事件 **/
addEvent(oUl, 'mousewheel', function(event) {
if (mousewheelLock) return ;
mousewheelLock = true;
// 向下滚动
if (event.delta < 0) {
nextPage();
} else { // 向上滚动
prevPage();
}
setTimeout(function(){
mousewheelLock = false;
}, scrollAnimateTime);
});
// 下一页
function nextPage() {
if (pageIndex < pageNum-1 ) {
changePage(pageIndex++);
}
}
// 上一页
function prevPage() {
if (pageIndex > 0 ) {
changePage(pageIndex--);
}
}
// 改变页面
function changePage(selectedPageIndex) {
oUl.style.top = -selectedPageIndex * 100 + 'vh';
for (var i=0; i<navLis.length; i++) {
navLis[i].style.background = 'white';
}
navLis[pageIndex].style.background = 'black';
}
</script>
</body>
</html>