JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.css">
<div id="fullpage">
<div class="section section-home">
<h1>home</h1>
</div>
<div class="section section-content">
<h1>1</h1>
</div>
<div class="section section-content">
<h1>2</h1>
</div>
<div class="section section-content">
<h1>3</h1>
</div>
<div class="section section-content">
<h1>4</h1>
</div>
<div class="section section-footer">
<h1>footer</h1>
</div>
</div>
<div id="test"></div>
CSS
h1 {
font-size: 50px;
margin: 0;
}
#test {
color: white;
position: absolute;
left: 0;
top: 0;
z-index: 10;
}
.section-home {
text-align: center;
background: blue;
color: #fff;
}
.section-content {
text-align: center;
background: green;
color: #fff;
}
.section-footer {
height: 100px;
text-align: center;
background: purple;
color: #fff;
}
JavaScript
var delay = 500,
curSlide = 1,
timer = false,
moveVec = false;
anch = [
'section-home', 'content-1',
'content-2', 'content-3',
'content-4', 'section-footer'
];
$(document).bind("wheel", function(e) {
if(timer)return;
moveVec = e.originalEvent.deltaY > 0;
if(curSlide == 1 || curSlide == 2 && !moveVec || curSlide == anch.length-1 && moveVec || curSlide == anch.length && !moveVec){
fa();
return;
}
if (!timer) {
timer = true;
timer = setTimeout(f, delay);
}
return false;
});
var f = function() {
if (moveVec && curSlide < anch.length)
$.fn.fullpage.silentMoveTo(++curSlide);
else if(!moveVec && curSlide > 1)
$.fn.fullpage.silentMoveTo(--curSlide);
timer = false;
};
var fa = function() {
if (moveVec && curSlide < anch.length)
$.fn.fullpage.moveTo(++curSlide);
else if(!moveVec && curSlide > 1)
$.fn.fullpage.moveTo(--curSlide);
timer = false;
};
$('#fullpage').fullpage({
anchors: anch
});
$.fn.fullpage.setAllowScrolling(false);