Ako posúvať stránku podľa stránky (div div)? - javascript, jquery, html, css, jquery-ui

Pracujem na jednej stránke (potenciálne) vírusovej webovej stránke a backend je hotový, vylepšujem front.

Každá div (stránka) má 100% šírku a 100% výškucelá stránka. Chcem vytvoriť funkciu jQuery, ktorá sa spustí, keď sa používateľ posúva (pomocou trackpadu, myši alebo klávesnice.) A či už používatelia idú nahor alebo nadol, posúvajú sa na predchádzajúcu alebo nasledujúcu div / stránku (pričom bránia predvolenému posúvaciemu pohybu).

Máte predstavu, ako by sa to mohlo dosiahnuť? Toto je môj 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>

Môj Javascript:

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

odpovede:

táto metóda jquery by vás mala začať:

<!-- 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>