web-dev-qa-db-fra.com

jQuery ou Javascript - comment désactiver le défilement de fenêtre sans débordement: hidden;

Bonjour est-il possible de désactiver le défilement de la fenêtre sans utiliser overflow:hidden; quand je survole un élément?

j'ai essayé :

$('.chat-content').on('mouseenter',function(){
    $(document).scroll(function(e){
        if(!$(e).hasClass('.chat-content'))
        e.stopPropagation();
        e.preventDefault();
    });
});

je veux dire, je veux laisser la barre de défilement visible, mais lorsque je fais défiler l'élément, je suis avec la souris, la fenêtre ne défile pas, alors que l'élément sur lequel je peux défiler peut défiler

Donc, désactivez le défilement pour body, mais pas pour element je suis fini sans utiliser css

voici un autre essai que j'ai fait: http://jsfiddle.net/SHwGL/

javascriptjquerycssscroll
27
itsme

Essayez de gérer l'événement 'mousewheel' sur tous les nœuds sauf un.

$('body').on({
    'mousewheel': function(e) {
        if (e.target.id == 'el') return;
        e.preventDefault();
        e.stopPropagation();
    }
})

Démo: http://jsfiddle.net/DHz77/1/

46
Glen Swift

Si vous voulez faire défiler l'élément que vous avez survolé et empêcher la fenêtre de défiler, voici une fonction très utile:

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

Appliquez la classe "Scrollable" à votre élément et le tour est joué!

6
pmrotule

Suivant l’idée de Glens, voici une autre possibilité. Cela vous permettrait de faire défiler à l'intérieur de la div, mais empêcherait le corps de faire défiler avec elle, lorsque le défilement div se termine. Cependant, il semble y avoir trop d'accumulation de preventDefault si vous faites trop défiler, puis cela crée un décalage si vous voulez faire défiler vers le haut. Quelqu'un a-t-il une suggestion pour résoudre ce problème?

    $(".scrollInsideThisDiv").bind("mouseover",function(){
       var bodyTop = document.body.scrollTop;
       $('body').on({
           'mousewheel': function(e) {
           if (document.body.scrollTop == bodyTop) return;
           e.preventDefault();
           e.stopPropagation();
           }
       });
    });
    $(".scrollInsideThisDiv").bind("mouseleave",function(){
          $('body').unbind("mousewheel");
    });
2
Fabio Nolasco

tfe a répondu à cette question dans un autre message sur StackOverflow: Répond

Une autre méthode serait d'utiliser:

$(document).bind("touchmove",function(event){
  event.preventDefault();
});

Toutefois, cela pourrait empêcher certaines fonctionnalités de jquery mobile de fonctionner correctement.

1
shat

Sans variables externes:

       $('.element').bind('mousewheel', function(e, d) {
            if((this.scrollTop === (this.scrollHeight - this.offsetHeight) && d < 0)
                || (this.scrollTop === 0 && d > 0)) {
                e.preventDefault();
            }
        });
1
egor.xyz

Solution 'fixe' CSS (comme Facebook):

body_temp = $("<div class='body_temp' />")
    .append($('body').contents())
    .css('position', 'fixed')
    .css('top', "-" + scrolltop + 'px')
    .width($(window).width())
    .appendTo('body');

pour basculer à l'état normal:

var scrolltop = Math.abs($('.body_temp').position().top);
$('body').append($('.body_temp').contents()).scrollTop(scrolltop);
0
Jeaf Gilbert

Beaucoup de bonnes idées sur ce fil. J'ai beaucoup de popups dans ma page pour gérer les entrées de l'utilisateur. Ce que j’utilise, c’est une combinaison de désactivation de la molette de la souris et de masquage de la barre de défilement:

this.disableScrollFn= function(e) { 
    e.preventDefault(); e.stopPropagation() 
};
document.body.style.overflow = 'hidden';
$('body').on('mousewheel', this.disableScrollFn);

L'avantage de ceci est que nous empêchons l'utilisateur de faire défiler de toutes les manières possibles, sans avoir à changer la position css et les propriétés principales. Je ne suis pas préoccupé par les événements tactiles, car un contact extérieur fermerait la fenêtre contextuelle.

Pour désactiver ceci, lors de la fermeture du popup, je fais ce qui suit.

document.body.style.overflow = 'auto';
$('body').off('mousewheel', this.disableScrollFn);

Remarque, je stocke une référence à mon disableScrollFn sur l'objet existant (dans mon cas, un PopupViewModel), car cela se déclenche à la fermeture de la fenêtre pour accéder à disableScrollFn.

0
Shakus