本来想写一个整屏切换的效果,一开始用的button代替鼠标滚轮,最后替换成滚轮时才发现,滚动一次能切换好多屏.有没有办法阻止呢?就是不管鼠标滚轮滚动多少.都当成一次处理.或者有没有滚轮结束触发某个事件呢?
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<style>
* {
padding: 0;
margin: 0;
}
.container {
position: relative;
border: 1px solid #000000;
margin: 0 auto;
background: red;
}
.container ul {
position: absolute;
}
.container li {
width: 1000px;
height: 500px;
background: blue;
}
.container li:nth-child(1) {
background-color: red;
}
.container li:nth-child(2) {
background-color: black;
}
.container li:nth-child(3) {
background-color: yellow;
}
.container li:nth-child(4) {
background-color: deeppink;
}
::-webkit-scrollbar {
width: 0px;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li>111111111111</li>
<li>2222222222222</li>
<li>3333333333333</li>
<li>4444444444444</li>
</ul>
</div>
<script>
$(function () {
var mW = $(window).width();
var mH = $(window).height();
var NmH = 0;
$("ul li").css({
"width": mW,
"height": mH
});
$(document.body).css({
"overflow-x": "hidden",
"overflow-y": "hidden"
});
document.onmousewheel = function (e) {
e = e || window.event;
var wheel = e.wheelDelta;
if (wheel > 0) {
if (NmH <= 0) {
return false
}
else {
NmH -= mH;//向上滑动触发
$('.container ul').stop().animate({
"top": -NmH
}, 1000);
}
}
else {
if (NmH >= mH * ($(".container ul li").length - 1)) {
return false
}
else {
NmH += mH;//向下滑动触发
$('.container ul').stop().animate({
"top": -NmH
}, 1000);
}
}
};
})
</script>
</body>
</html>
