Ich habe die verschiedenen Funktionen überprüft und getestet, um zu verhindern, dass der Körper in einem Div scrollen kann, und eine Funktion kombiniert, die funktionieren sollte.
$('.scrollable').mouseenter(function() {
$('body').bind('mousewheel DOMMouseScroll', function() {
return false;
});
$(this).bind('mousewheel DOMMouseScroll', function() {
return true;
});
});
$('.scrollable').mouseleave(function() {
$('body').bind('mousewheel DOMMouseScroll', function() {
return true;
});
});
- Dadurch wird das Scrollen gestoppt, da das Scrollen im Container weiterhin möglich sein soll
- Dies wird auch beim Verlassen der Maus nicht deaktiviert
Irgendwelche Ideen oder bessere Möglichkeiten, dies zu tun?
jquery
mousewheel
RIK
quelle
quelle
Antworten:
Update 2: Meine Lösung basiert darauf, das native Scrollen des Browsers vollständig zu deaktivieren (wenn sich der Cursor innerhalb des DIV befindet) und das DIV dann manuell mit JavaScript zu scrollen (indem seine
.scrollTop
Eigenschaft festgelegt wird). Ein alternativer und IMO-besserer Ansatz wäre, das Scrollen des Browsers nur selektiv zu deaktivieren, um das Scrollen der Seite zu verhindern, nicht jedoch das Scrollen des DIV. Schauen Sie sich Rudies Antwort unten an, die diese Lösung demonstriert.Bitte schön:
Live-Demo: https://jsbin.com/howojuq/edit?js,output
Sie stellen also die Bildlaufposition manuell ein und verhindern dann nur das Standardverhalten (das Scrollen des DIV oder der gesamten Webseite).
Update 1: Wie Chris in den Kommentaren unten bemerkt hat, sind in neueren Versionen von jQuery die Delta-Informationen im
.originalEvent
Objekt verschachtelt , dh jQuery macht sie nicht mehr in seinem benutzerdefinierten Ereignisobjekt verfügbar und wir müssen sie stattdessen aus dem nativen Ereignisobjekt abrufen .quelle
-e.detail
, getestet in Firefox (Mac, Linux), Safari (Mac) und Chromium (Linux)..detail
entspricht nicht dem Vorzeichen von.wheelData
(was Chrome / IE hat), daher müssen wir es manuell invertieren. Danke, dass du meine Antwort korrigiert hast.if( e.originalEvent ) e = e.originalEvent;
if ( $(this)[0].scrollHeight !== $(this).outerHeight() ) { //yourcode }
wird nur ausgeführt, wenn eine Bildlaufleiste vorhanden ist.Wenn Sie sich nicht für die Kompatibilität mit älteren IE-Versionen (<8) interessieren, können Sie ein benutzerdefiniertes jQuery-Plugin erstellen und es dann für das überlaufende Element aufrufen.
Diese Lösung hat einen Vorteil gegenüber der von Šime Vidas vorgeschlagenen, da sie das Bildlaufverhalten nicht überschreibt, sondern nur bei Bedarf blockiert.
quelle
[Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive.
Ich denke, es ist manchmal möglich, das Mousescroll-Event abzusagen: http://jsfiddle.net/rudiedirkx/F8qSq/show/
Im Event-Handler müssen Sie Folgendes wissen:
d = e.originalEvent.deltaY, dir = d < 0 ? 'up' : 'down'
da eine positive Zahl einen Bildlauf nach unten bedeutetscrollTop
für oben,scrollHeight - scrollTop - offsetHeight
für untenWenn du bist
top = 0
, oderbottom = 0
,Veranstaltung abbrechen:
e.preventDefault()
(und vielleicht sogare.stopPropagation()
).Ich denke, es ist besser, das Bildlaufverhalten des Browsers nicht zu überschreiben. Kündigen Sie es nur, wenn zutreffend.
Es ist wahrscheinlich nicht perfekt xbrowser, aber es kann nicht sehr schwer sein. Vielleicht ist Macs doppelte Bildlaufrichtung jedoch schwierig ...
quelle
Verwenden Sie die folgende CSS-Eigenschaft
overscroll-behavior: contain;
für das untergeordnete Elementquelle
Sehen Sie, ob dies Ihnen hilft:
Demo: jsfiddle
bearbeiten:
Versuche dies:
quelle
Eine weniger hackige Lösung ist meiner Meinung nach, den Überlauf auf dem Körper zu verbergen, wenn Sie mit der Maus über das scrollbare Div fahren. Dies verhindert, dass der Körper scrollt, aber es tritt ein unerwünschter "Springen" -Effekt auf. Die folgende Lösung umgeht das:
Sie können Ihren Code bei Bedarf intelligenter gestalten. Sie können beispielsweise testen, ob der Körper bereits eine Polsterung hat, und wenn ja, die neue Polsterung hinzufügen.
quelle
In der obigen Lösung gibt es einen kleinen Fehler in Bezug auf Firefox. In Firefox hat das Ereignis "DOMMouseScroll" keine e.detail-Eigenschaft. Um diese Eigenschaft zu erhalten, sollten Sie das folgende 'e.originalEvent.detail' schreiben.
Hier ist eine funktionierende Lösung für Firefox:
quelle
Hier eine einfache Lösung ohne jQuery, die den nativen Bildlauf des Browsers nicht zerstört (dies ist: kein künstliches / hässliches Scrollen):
Live-Demo: http://jsfiddle.net/ibcaliax/bwmzfmq7/4/
quelle
Hier ist meine Lösung, die ich in Anwendungen verwendet habe.
Ich habe den Body-Überlauf deaktiviert und die gesamte HTML-Website in Container-Divs platziert. Die Website-Container haben einen Überlauf und daher kann der Benutzer die Seite wie erwartet scrollen.
Ich habe dann ein Geschwister-Div (#Prevent) mit einem höheren Z-Index erstellt, der die gesamte Website abdeckt. Da #Prevent einen höheren Z-Index hat, überlappt es den Website-Container. Wenn #Prevent sichtbar ist, schwebt die Maus nicht mehr über den Website-Containern, sodass kein Bildlauf möglich ist.
Sie können natürlich ein anderes Div, wie z. B. Ihr Modal, mit einem höheren Z-Index als #Prevent in das Markup einfügen. Auf diese Weise können Sie Popup-Fenster erstellen, in denen keine Bildlaufprobleme auftreten.
Diese Lösung ist besser, da die Bildlaufleisten nicht ausgeblendet werden (Sprungeffekt). Es erfordert keine Ereignis-Listener und ist einfach zu implementieren. Es funktioniert in allen Browsern, obwohl Sie mit IE7 & 8 herumspielen müssen (abhängig von Ihrem spezifischen Code).
html
CSS
jquery / js
Deaktivieren / Aktivieren Sie den Bildlauf
quelle
Ich musste dieses Ereignis mehreren Elementen hinzufügen, die möglicherweise eine Bildlaufleiste haben. In den Fällen, in denen keine Bildlaufleiste vorhanden war, funktionierte die Hauptbildlaufleiste nicht ordnungsgemäß. Also habe ich eine kleine Änderung am @ Šime-Code vorgenommen:
Jetzt verhindern nur Elemente mit einer Bildlaufleiste, dass der Hauptscroll gestoppt wird.
quelle
Die reine Javascript-Version von Vidas 'Antwort
el$
ist der DOM-Knoten der Ebene, durch die Sie scrollen.Stellen Sie sicher, dass Sie die gerade nicht mehrmals anbringen! Hier ist ein Beispiel,
Achtung , die Funktion dort muss eine Konstante sein, wenn Sie die Funktion jedes Mal neu initialisieren, bevor Sie sie anhängen, d. H.
var func = function (...)
dasremoveEventListener
wird nicht funktionieren.quelle
Sie können dies ohne JavaScript tun. Sie können den Stil für beide Divs auf
position: fixed
und einstellenoverflow-y: auto
. Möglicherweise müssen Sie einen von ihnen höher als den anderen machen, indem Sie ihn einstellenz-index
(wenn sie sich überlappen).Hier ist ein grundlegendes Beispiel für CodePen .
quelle
Hier ist das Plugin, das nützlich ist, um das Scrollen der Eltern beim Scrollen eines bestimmten Divs zu verhindern, und das eine Reihe von Optionen zum Spielen bietet.
Schau es dir hier an:
https://github.com/MohammadYounes/jquery-scrollLock
Verwendung
Scroll Lock über JavaScript auslösen:
Scroll Lock über Markup auslösen:
Ansicht Demo
quelle
Bieten Sie dies nur als mögliche Lösung an, wenn Sie nicht glauben, dass der Benutzer die offensichtliche Änderung negativ beurteilen wird. Ich habe einfach die Überlaufklasse des Körpers in versteckt geändert, als sich die Maus über dem Ziel-Div befand. dann habe ich das div des Körpers in versteckten Überlauf geändert, wenn die Maus geht.
Persönlich denke ich nicht, dass es schlecht aussieht, mein Code könnte umgeschaltet werden, um ihn sauberer zu machen, und es gibt offensichtliche Vorteile, diesen Effekt zu ermöglichen, ohne dass der Benutzer es merkt. Das ist also wahrscheinlich die letzte Antwort.
quelle