Wie kann ich vorübergehend verhindern, dass ein scrollbares div scrollt?

Question

Hier ist meine aktuelle Situation:

Ich habe eine Webseite mit ein paar scrollbaren divs. Jedes dieser divs enthält eine Anzahl von Objekten. Ich verwende YUI, um Popup-Menüs von Aktionen anzuzeigen, die für jedes Objekt ausgeführt werden können. Jedem Objekt ist ein eigenes Menü zugeordnet, das dynamisch erstellt und angezeigt wird. Die Popup-Menüs können groß sein und die Grenzen des scrollbaren div überlappen.

Von dem, was ich glaube, sind Probleme mit Fokus (die Menüs müssen zugänglich sein), wenn ich den Mauszeiger über eine Aktion, die auf einer Kante des scrollbaren Div liegt, das div automatisch scrollt, den Inhalt verschieben, aber verlassen das Menü ist stationär. Der Versuch, das Menü dynamisch zu verschieben, wenn dies geschieht, ist nicht etwas, was ich tun möchte, da ich glaube, dass es eine schlechte Benutzererfahrung bieten würde.

Also muss ich verhindern, dass dieses fokussierte Menü das div scrollen. Meine Idee, die beste Benutzeroberfläche zu bieten, besteht darin, zu verhindern, dass diese inneren Divs beim Öffnen eines Menüs scrollen. Dadurch bleibt das Menü an der optimalen Position, um dem Benutzer anzuzeigen, auf welches Element reagiert wird. Wenn der Benutzer durch das Feld blättern möchte, kann er klicken, um das Menü zu schließen und normal zu blättern.

Wie kann ich das tun? Ich brauche eine Lösung, die über die wichtigsten Browser hinweg funktioniert.

Mein erster Gedanke war, das Ereignis onscroll für dieses bestimmte Element zu hören. Leider scheint es keinen einfachen Weg von dort zu geben, um das Scrollen zu verhindern. Zum einen scheint mein Javascript-Ereigniscode ausgeführt zu werden, nachdem das tatsächliche Scrollen stattgefunden hat.

Dann dachte ich, dass da mein Code ausgeführt wird, nachdem das Objekt gescrollt hat, ich habe gerade zurückgesetzt konnte obj.scrollTop und obj.scrollLeft. Natürlich scheint dies zu funktionieren, obwohl ich mir Sorgen mache, dass der Benutzer bei langsamen Browsern den Inhalt im div "herumspringen" sieht. Es wäre auch sehr schön, wenn die Menge des gescrollten Elements Teil des Ereignisobjekts ist. Ist es irgendwo drin stecken? Ich suche nach einer Alternative zum Speichern der scrollTop- und scrollLeft-Variablen für dieses Element und dann deren Verwendung, während das Scrollen vorübergehend deaktiviert ist.

Was ist der beste Weg, um das gesamte Problem zu lösen?

Answer 1

Ich habe einen Weg gefunden, um dieses Problem zu umgehen. Indem Sie das Menüelement aus dem scrollbaren div entfernen und es direkt an document.body anhängen, hören alle Browser auf, das div zu scrollen, um das fokussierte Element freizulegen (obwohl das Element bereits vollständig sichtbar ist).

Danke an alle für Ihre Zeit und Ihre Antworten!

Answer 2

Die einfache Antwort ist nein, Sie können das nicht tun. Es ist doppelt nein, wenn Sie eine Cross-Browser-Lösung möchten.

Bietet dem Benutzer die klare Affordanz, dass etwas gescrollt werden kann, dann leugnen sie das ist einfach nur schlechte UI-Design.

Ok, nach Ihrer Bearbeitung stellt sich heraus, dass Sie nicht wirklich versuchen, den Benutzer daran zu hindern, zu scrollen.

Die Hauptantwort bleibt jedoch wahr. Es scheint, als ob der Fokus auf ein Rechteck (wahrscheinlich ein Anker?) Gerichtet ist, das nicht vollständig sichtbar ist und eine Bildlaufbewegung verursacht. Gibt es einen Grund, warum dieses Rechteck den Fokus bekommen muss? Für die Zugänglichkeit?

Answer 3

Was passiert, wenn Sie nicht Überlauf haben: blättern und stattdessen verwendete man overflow: hidden und zur Verfügung gestellt nach oben/unten Tasten, die der Benutzer bei Bedarf zu blättern erlaubt? Diese Tasten könnten natürlich leicht deaktiviert werden.

Answer 4

Auch wenn es nicht die Antwort ist, die Sie suchen, wenn Sie den Anzeigewert des Div auf 'none' setzen, während die Seite geladen wird (vom Server) und dann ein Ereignis zum Laden der Seite verdrahtet hat (entweder pageLoad in ajax.net oder anhängen an das onload-Ereignis via Javascript), wodurch die div-Anzeige auf 'Blockieren' gesetzt wird. Dies würde sicherstellen, dass langsamere Browser das div nicht "herumspringen" sehen würden (könnte sogar setzen) ein 'loading'-bild im div um den benutzer zu zeigen, dass es etwas tut und nicht nur unsichtbar)

entschuldigung ich könnte keine komplexere/flüssigere lösung anbieten.

Answer 5

Ich stimme Anthony bezüglich der Darstellung der Funktionalität zu, die Sie nicht zulassen möchten. Wenn Sie das Scrollen deaktivieren, sollten Sie diesen Teil der Seite visuell deaktivieren oder entfernen.

Zu diesem Zweck können Sie ein halbtransparentes div an der Oberseite des in Frage kommenden scrollbaren div positionieren, das die Mausereignisse erfassen und optisch anzeigen würde, dass das scrollbare div für den Moment inaktiv ist. Es wäre schwierig, Cross-Browser-kompatibel zu machen und wäre nicht perfekt, aber wiederum sind es nur sehr wenige clientseitige Tricks wie diese.