Comment faire de la molette de la souris faites défiler jusqu'à la section comme dans mediafire.com

Je pense que ce type d'animation est sans doute difficile à prendre surtout quelqu'un de nouveau à jQuery. Ceci implique le défilement, la capture de la molette de la souris événements, retard dans les animations, et surtout à la faire fonctionner correctement sur les navigateurs et sur les navigateurs mobiles' balayer et toucher des événements. Si vous n'avez pas une bonne compréhension, je vous suggère d'utiliser un plugin. Ces deux sont les meilleurs: Une Page De Défilement et Pleine Page.

Je ne peux que vous montrer la méthode de base sur la façon d'obtenir ce fait sur les navigateurs, si vous voulez qu'il fonctionne correctement sur mobile, vous devez faire votre part et ajouter le balayage et d'événements tactiles. 🙂

//Set each section's height equals to the window height
$('section').height($(window).height());
/*set the class 'active' to the first element 
this will serve as our indicator*/
$('section').first().addClass('active');
/* handle the mousewheel event together with 
DOMMouseScroll to work on cross browser */
$(document).on('mousewheel DOMMouseScroll', function (e) {
e.preventDefault();//prevent the default mousewheel scrolling
var active = $('section.active');
//get the delta to determine the mousewheel scrol UP and DOWN
var delta = e.originalEvent.detail < 0 || e.originalEvent.wheelDelta > 0 ? 1 : -1;
//if the delta value is negative, the user is scrolling down
if (delta < 0) {
//mousewheel down handler
next = active.next();
//check if the next section exist and animate the anchoring
if (next.length) {
/*setTimeout is here to prevent the scrolling animation
to jump to the topmost or bottom when 
the user scrolled very fast.*/
var timer = setTimeout(function () {
/* animate the scrollTop by passing 
the elements offset top value */
$('body, html').animate({
scrollTop: next.offset().top
}, 'slow');
//move the indicator 'active' class
next.addClass('active')
.siblings().removeClass('active');
clearTimeout(timer);
}, 800);
}
} else {
//mousewheel up handler
/*similar logic to the mousewheel down handler 
except that we are animate the anchoring 
to the previous sibling element*/
prev = active.prev();
if (prev.length) {
var timer = setTimeout(function () {
$('body, html').animate({
scrollTop: prev.offset().top
}, 'slow');
prev.addClass('active')
.siblings().removeClass('active');
clearTimeout(timer);
}, 800);
}
}
});

Voici une démo: jsfiddle.net/NGj7F/

OriginalL'auteur Mark S