das Scrollen von Element zu Fenster blubbert

Entschuldigung, soweit ich weiß, ist es unmöglich, einen Scroll-Vorgang abzubrechen.

Beide W3 und MSDN sagen:

Cancelable  No
Bubbles     No

Ich denke, Sie müssen das den Browser-Autoren überlassen, um das Problem zu beheben. Firefox (ohnehin 3.5 unter Linux) scheint ein besseres Verhalten für mich zu haben: Es scrollt das übergeordnete Element nur dann, wenn sich das Kind bereits am oberen/unteren Ende befindet, wenn Sie mit dem Scrollwheel start starten.

Wenn wir das Fenster-Scrollen nicht verhindern können, warum können Sie es nicht rückgängig machen? Das heißt, das Scroll-Ereignis abfangen und dann zu einer festen Position zurückblättern.

Der folgende Code sperrt die Y-Achse, solange man über $("#popup") fährt:

// here we store the window scroll position to lock; -1 means unlocked
var forceWindowScrollY = -1;

$(window).scroll(function(event) {
  if(forceWindowScrollY != -1 && window.scrollY != forceWindowScrollY) {
    $(window).scrollTop(forceWindowScrollY);    
  }
});

$("#popup").hover(function() {
  if(forceWindowScrollY == -1) {
    forceWindowScrollY = $(window).scrollTop();
  }
}, function() {
  forceWindowScrollY = -1;
});

Ich verwende dies für das Abfragevorschlagsfeld auf http://bundestube.de/ (geben Sie einige Zeichen in das obere Suchfeld ein, um den scrollbaren Bereich sichtbar zu machen):

Dies funktioniert einwandfrei in Chrome/Safari (Webkit) und mit einigen Scrolling-Störungen in Firefox und Opera. Aus irgendeinem Grund funktioniert es nicht mit meiner IE - Installation. Ich denke, das hat mit der Hover-Methode von jQuery zu tun, die scheinbar in 100% aller Fälle nicht richtig funktioniert.

Ich weiß, es ist eine ziemlich alte Frage, aber da dies eines der besten Ergebnisse bei Google ist ... musste ich das Scrollen ohne Bubbles ohne jQuery abbrechen und dieser Code funktioniert für mich:

function preventDefault(e) {
  e = e || window.event;
  if (e.preventDefault)
    e.preventDefault();
  e.returnValue = false;  
}

document.getElementById('a').onmousewheel = function(e) { 
  document.getElementById('a').scrollTop -= e. wheelDeltaY; 
  preventDefault(e);
}

mein jQuery-Plugin:

$('.child').dontScrollParent();

$.fn.dontScrollParent = function()
{
    this.bind('mousewheel DOMMouseScroll',function(e)
    {
        var delta = e.originalEvent.wheelDelta || -e.originalEvent.detail;

        if (delta > 0 && $(this).scrollTop() <= 0)
            return false;
        if (delta < 0 && $(this).scrollTop() >= this.scrollHeight - $(this).height())
            return false;

        return true;
    });
}

So habe ich das Problem gelöst:

Ich rufe folgendes an, wenn ich das Popup öffne:

$('body').css('overflow','hidden');

Wenn ich dann das Popup schließe, rufe ich das an:

$('body').css('overflow','auto');

Das Popup soll modal sein, sodass keine Interaktion mit dem darunter liegenden Körper erforderlich ist

Funktioniert ziemlich gut

Anscheinend können Sie overflow:hidden einstellen, um das Scrollen von zu verhindern. Nicht sicher, wie das gehen würde, wenn das Dokument bereits gescrollt wurde. Ich bin auch auf einem mauslosen Laptop, also habe ich heute Abend kein Scrolly-Rad getestet :-) Es ist wahrscheinlich einen Versuch wert.

Folgendes mache ich:

  $('.noscroll').on('DOMMouseScroll mousewheel', function(ev) {
     var prevent = function() {
         ev.stopPropagation();
         ev.preventDefault();
         ev.returnValue = false;
         return false;
     }
     return prevent();
  }); 

Demo Geige

Verwenden Sie CSS overflow:hidden, um die Bildlaufleiste auszublenden, da dies nichts bewirkt, wenn Sie sie ziehen.

Funktioniert browserübergreifend

Ich möchte ein wenig aktualisierten Code hinzufügen, der am besten funktioniert:

var yourElement = $('.my-element');

yourElement.on('scroll mousewheel wheel DOMMouseScroll', function (e) {
    var delta = e.originalEvent.wheelDelta || -e.originalEvent.detail;

    if (delta > 0 && $(this).scrollTop() <= 0)
        return false;
    if (delta < 0 && $(this).scrollTop() >= this.scrollHeight - $(this).outerHeight())
        return false;

    return true;
});

Der Unterschied zwischen dieser und einer, die oben bereits erwähnt wurde, ist das Hinzufügen weiterer Ereignisse und die Verwendung von outerHeight () anstelle von height () , um einen Absturz zu vermeiden, wenn das Element über eine Auffüllung verfügt!

Neuer Web-Entwickler hier. Dies funktionierte für mich sowohl bei IE als auch bei Chrome wie ein Zauber.

static preventScrollPropagation(e: HTMLElement) {
    e.onmousewheel = (ev) => {
        var preventScroll = false;
        var isScrollingDown = ev.wheelDelta < 0;
        if (isScrollingDown) {
            var isAtBottom = e.scrollTop + e.clientHeight == e.scrollHeight;
            if (isAtBottom) {
                preventScroll = true;
            }
        } else {
            var isAtTop = e.scrollTop == 0;
            if (isAtTop) {
                preventScroll = true;
            }
        }
        if (preventScroll) {
            ev.preventDefault();
        }
    }
}

Lassen Sie sich nicht von der Anzahl der Zeilen täuschen, es ist ziemlich einfach - nur ein bisschen ausführlich für die Lesbarkeit (selbstdokumentierender Code ist ftw richtig?)

sie können den jscroll-Bereich innerhalb des iframe ausprobieren, um die Standardrolle zu ersetzen. 

http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html

Ich bin mir nicht sicher, aber probieren Sie es aus

Ab jetzt 2018 und darüber ist e.preventDefault ausreichend.

$('.elementClass').on("scroll", function(e){
    e.preventDefault();
 }); 

Dies verhindert das Blättern zum übergeordneten Element.

$('.scrollable').on('DOMMouseScroll mousewheel', function (e) {
    var up = false;
    if (e.originalEvent) {
        if (e.originalEvent.wheelDelta) up = e.originalEvent.wheelDelta / -1 < 0;
        if (e.originalEvent.deltaY) up = e.originalEvent.deltaY < 0;
        if (e.originalEvent.detail) up = e.originalEvent.detail < 0;
    }

    var prevent = function () {
        e.stopPropagation();
        e.preventDefault();
        e.returnValue = false;
        return false;
    }

    if (!up && this.scrollHeight <= $(this).innerHeight() + this.scrollTop + 1) {
        return prevent();
    } else if (up && 0 >= this.scrollTop - 1) {
        return prevent();
    }
});