1 回答
![?](http://img1.sycdn.imooc.com/54584dc4000118d302200220-100-100.jpg)
TA贡献1868条经验 获得超4个赞
var PR = {
active : 0,
init : function(){
$('body').on('mousewheel DOMMouseScroll',PR.mouseWhell);
},
mouseWhell : function(e)
{
if(typeof e.originalEvent.detail == 'number' && e.originalEvent.detail !== 0) {
if(e.originalEvent.detail > 0) {
console.log('Down');
PR.go(-1);
} else if(e.originalEvent.detail < 0){
console.log('Up');
PR.go(1);
}
} else if (typeof e.originalEvent.wheelDelta == 'number') {
if(e.originalEvent.wheelDelta < 0) {
console.log('Down');
PR.go(-1);
} else if(e.originalEvent.wheelDelta > 0) {
console.log('Up');
PR.go(1);
}
}
},
go : function(plus){
console.log('go');
if($('body').hasClass('working'))
return;
$('body').addClass('working');
var eq = PR.active - plus;
console.log(eq);
var targetSection= $('.section')[eq];
if(targetSection == null){
$('body').removeClass('working');
return;
}
console.log("animte");
$([document.documentElement, document.body]).animate({
scrollTop: targetSection.offsetTop
}, 2000, function() {
$('body').removeClass('working');
PR.active = eq;
});
}
};
$(document).ready(function(){ PR.init();});
/* *** index.html - START *** */
body, html {
height: 100%;
margin: 0;
padding: 0;
}
header {
height: 100%;
background-image: url("https://i.postimg.cc/8P4zT6K0/ps4-controller-min.jpg");
background-attachment: fixed;
background-position: bottom center;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
}
header h1 {
font-size: 32px;
font-weight: bold;
vertical-align: middle;
margin: 0 auto;
}
.container_page_1 {
width: 100%;
height: 100%;
background-color: red;
}
.container_page_2 {
width: 100%;
height: 100%;
background-color: green;
}
/* *** index.html - END *** */
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
</head>
<body>
<header class="section">
<h1>Lorem Ipsum</h1>
</header>
<nav>
</nav>
<div class="container_page_1 section">
</div>
<div class="container_page_2 section">
</div>
</body>
</html>
添加回答
举报