it-swarm.com.de

das Scrollen von Element zu Fenster blubbert

Ich habe ein modales Box-Fenster (Popup), das einen iframe enthält.
und in diesem iframe gibt es ein div das scrollbar ist.

Wenn ich den inneren DIV des iframe scrolle und seine obere oder untere Grenze erreicht hat,
Das Fenster des Browsers beginnt zu scrollen. Dies ist ein unerwünschtes Verhalten.

Ich habe so etwas ausprobiert, was beim Scrollen des Hauptfensters abbricht
onMouseEnter, wenn die Maus in den Popup-Feldbereich eintritt:

e.preventDefault () funktioniert aus irgendeinem Grund nicht so, wie es sollte ...

$("#popup").mouseenter(function(){
   $(window).bind("scroll", function(e){
        e.preventDefault();
   }); 
}).mouseleave(function(){
    $(window).unbind("scroll");
});

Aktualisieren

Scheint wie jetzt 2013 e.preventDefault(); ist genug ...

52
vsync

Gelöst (für modern - Browser) unter Verwendung einer einfachen CSS-Eigenschaft:
Overscroll-Verhalten

body{
  height: 600px;
  overflow: auto;
}

section{
  width: 50%;
  height: 50%;
  overflow: auto;
  background: lightblue;
  overscroll-behavior: none; /*   <--- the trick    */
}

section::before{
  content: '';
  height: 200%;
  display: block;
}
<section>
 <input value='end' />
</section>

Wenden Sie einfach die Stileigenschaft auf das Element an, für das der Bildlauf "gesperrt" werden soll, und das Bildlaufereignis wird nicht mit einem übergeordneten Element verbunden, das ebenfalls einen Bildlauf aufweist.


Gleiche Demo wie oben, aber ohne den Trick:

body{
  height: 600px;
  overflow: auto;
}

section{
  width: 50%;
  height: 50%;
  overflow: auto;
  background: lightblue;
}

section::before{
  content: '';
  height: 200%;
  display: block;
}
<section>
 <input value='end' />
</section>

1
vsync

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.

25
bobince

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):

Screenshot

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);
}
4
Nebril

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;
    });
}
3
psycho brm

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

1

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.

0
Dan F

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

0
parliament

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!

0

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?)

0
Vivek Maharajh

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

0
adardesign

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.

0
Must Keem J
$('.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();
    }
});
0
Roland Soós