Comment faire défiler page par page (div par div)? - javascript, jquery, html, css, jquery-ui

Je travaille sur un site Web (potentiellement) viral et le back-end étant en cours, je perfectionne l'avant.

Chaque div (page) est 100% large et 100% hauteur doncpage entière. Je souhaite créer une fonction jQuery à déclencher lorsque l'utilisateur fait défiler l'écran (à l'aide du trackpad, de la souris ou du clavier.) Et, que l'utilisateur monte ou descende, affiche la page précédente ou suivante (tout en empêchant le mouvement de défilement par défaut).

Une idée de comment ça pourrait être fait? Ceci est mon HTML.

<div class="wrapper">
<article class="card">page 1</article>
<article class="card">page 2</article>
<article class="card">page 3</article>
<article class="card">page 4</article>
<article class="card">page 5</article>
</div>

Mon Javascript:

<script>
$(document).ready(function() {
$(".card").height($(window).height());
});
$(window).resize(function() { $(".card").height($(window).height()); });
$(window).trigger("resize");
</script>

Réponses:

cette méthode jQuery devrait vous aider à démarrer:

<!-- Scroller -->
<script>
var curPage = 0;

var pages = [
"#page1" => 0,
"#page2" => 1,
"#page3" => 2,
"#page4" => 3,
"#page5" => 4,
"#page6" => 5,
"#page7" => 6
];

var name = ".module_row_";

var scrollable = true;

jQuery(document).ready(function() {
jQuery(window).bind("mousewheel", function(event) {
event.preventDefault();
if (event.originalEvent.wheelDelta >= 0) {
if (curPage > 0 && scrollable) {
--curPage;
scrollable = false;
jQuery("html, body").animate({
scrollTop: jQuery(name + curPage).offset().top
}, 500, function() {
scrollable = true;
});
}
}
else {
if (curPage < pages.length && scrollable) {
++curPage;
scrollable = false;
jQuery("body, html").animate({
scrollTop: jQuery(name + curPage).offset().top
}, 500, function() {
scrollable = true;
});
}
}
});

jQuery(window).bind("DOMMouseScroll", function(e){
e.preventDefault();
if (e.originalEvent.detail > 0) {
if (curPage < pages && scrollable) {
++curPage;
scrollable = false;
jQuery("body, html").animate({
scrollTop: jQuery(name + curPage).offset().top
}, 500, function() {
scrollable = true;
});
}
} else {
if (curPage > 0 && scrollable) {
--curPage;
scrollable = false;
jQuery("html, body").animate({
scrollTop: jQuery(name + curPage).offset().top
}, 500, function() {
scrollable = true;
});
}
}

});
});
</script>