Salut quelqu'un pourrait transformer cette fonction en plugin...ca me permettrait d'apprendre en meme temps.
Cette fonction très utile permet d'empêcher la propagation du scroll sur les parents.
$('.Scrollable').on('DOMMouseScroll mousewheel', function(ev) {
var $this = $(this),
scrollTop = this.scrollTop,
scrollHeight = this.scrollHeight,
height = $this.height(),
delta = (ev.type == 'DOMMouseScroll' ?
ev.originalEvent.detail * -40 :
ev.originalEvent.wheelDelta),
up = delta > 0;
var prevent = function() {
ev.stopPropagation();
ev.preventDefault();
ev.returnValue = false;
return false;
}
if (!up && -delta > scrollHeight - height - scrollTop) {
// Scrolling down, but this will take us past the bottom.
$this.scrollTop(scrollHeight);
return prevent();
} else if (up && delta > scrollTop) {
// Scrolling up, but this will take us past the top.
$this.scrollTop(0);
return prevent();
}
});
Bon, il s'appelle ZePlugin, tu l'appelles comme ca:
$('.Scrollable').ZePlugin();
Je n'ai rien vérifier, par contre ^^ ... a tester, donc.
(function($) {
$.fn.ZePlugin = function() {
return this.each(function() {
$(this).on('DOMMouseScroll mousewheel', function(ev) {
var $this = $(this),
scrollTop = this.scrollTop,
scrollHeight = this.scrollHeight,
height = $this.height(),
delta = (ev.type == 'DOMMouseScroll' ?
ev.originalEvent.detail * -40 :
ev.originalEvent.wheelDelta),
up = delta > 0;
var prevent = function() {
ev.stopPropagation();
ev.preventDefault();
ev.returnValue = false;
return false;
}
if (!up && -delta > scrollHeight - height - scrollTop) {
// Scrolling down, but this will take us past the bottom.
$this.scrollTop(scrollHeight);
return prevent();
} else if (up && delta > scrollTop) {
// Scrolling up, but this will take us past the top.
$this.scrollTop(0);
return prevent();
}
});
});
};
})(jQuery);
Du coup inutile de la dire sans doute, mais pour etre sur:
var prevent = function() {
ev.stopPropagation();
ev.preventDefault();
ev.returnValue = false;
return false;
}
Je doute qu'il y ait besoin de ça. Faire un return false; va réaliser le ev.stopPropagation(); et le ev.preventDefault(); ce n'est pas la peine de l'écrire du coup. Tu peux directement renvoyer un return false; ligne 26 et 30 du code de Vallyan.