Overlay über Scrollbalken bei goolge mail

[Unfassbar]

Hallo zusammen,

ich habe bei google mail eine sehr interessante Technik gesehen (gibt es wohl schon länger, ist mir aber erst jetzt wirklich aufgefallen)

Wenn man z.B. versucht eine E-Mail ohne Betreff zu versenden, erscheint eine Art modale Box auf einem transparenten Overlay. Soweit klar, aber das Overlay erweckt den Eindruck, als würde es über der Scrollbar am rechten Rand liegen.

Eine kurze Überprüfung zeigt, dass dort tatsächlich ein div über der "Scrollbar" liegt. An weitere Infos zu kommen ist aber mehr als mühsam, das der HTML/Javascript Quellcode doch recht kryptisch ist.

Ich könnte mir das so erklären, dass der Anzeigebereich des Browsers so verkleinert wird, dass die eigentliche Scrollbar des Browsers verschwindet und an deren Stelle ein Element eingefügt wird, dass die Scrollbar inklusive der aktuellen Position des Balkens imitiert.

Das Problem an der Erklärung ist aber, dass das Ganze auch noch funktioniert, wenn man z.B. unter Windows das Theme wechselt, also die Scrollbar seitens des OS anders dargestellt wird. Mir ist keine Möglichkeit bekannt, solche Einstellungen per Javascript abzufragen, andererseits wüsste ich aber auch nicht, wie man ein Element über die Scrollbar des Browsers legen könnten.

Also langer Rede, kurzer Sinn: wie machen die das?

[LX]

Bei den meisten Browsern ist es durchaus möglich, ein Element absolut über der Scrollbar zu positionieren. Lediglich beim Scrollen scheint diese dann bei manchen Browern noch durch, ansonsten ergeben sich keine Probleme.

Eine andere Variante würde darin bestehen, das zu scrollende Element in ein anderes zu kapseln, welche mittels overflow:hidden und fester Breite die Scrollbar schlicht abschneidet; hier gibt sich das gleiche Ergebnis.

Ohne mir Google Mail genauer angesehen zu haben, würde ich vermuten, dass dort eine direkte Überlagerung der Maskierung durch overflow:hidden vorgezogen wurde.

Gruß, LX