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();
    }
});

5 réponses


Et comment tu veux l'appeler, ce plugin ?

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:

  • Copie ce code dans un fichier
  • Appelle-le jquery.zeplugin.js
  • link-le dans ton html, après que tu ais linké jquery
    - (tadaaaaaam)

Encore merci Vallyan je vais tester ca demain

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.