ubuntuusers.de

Nur mal als Frage an die CSS-Zauberer hier:

ist es eigentlich Möglich, die Overlay Scrollbars mittels CSS nachzubauen? Ich hätte die Funktion gern in Chromium, vermutlich ginge das auch mit anderen Webkit-basierten Browsern. Ein wenig gebastelt habe ich auch schon (siehe Screenshot), nur fehlt meiner Variante der "Mouseover"-Effekt, d.h. es bleibt auch beim überfahren mit der Maus nur ein schmaler Streifen.

Könnte man einen Anfasser realisieren?

Fancy pants... Das könnte mir gefallen. Vielleicht doppelte breite und auf den Anfasser verzichten und ich würds kaufen. Das Overlayding stört eh nur, bin ein Radldreher...

Also bisher siehts so aus:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

::-webkit-scrollbar
{
    width: 3px;
    height: 3px;
}

::-webkit-scrollbar-track-piece
{
    background-color: #ffffff;
    -webkit-border-radius: 3px;
}

::-webkit-scrollbar-thumb:vertical
{
    height: 5px;
    background-color: #c64026;
    -webkit-border-radius: 3px;
}
::-webkit-scrollbar-thumb:horizontal
{
    width: 5px;
    background-color: #c64026;
    -webkit-border-radius: 3px;
}

Habs über die Custom.css eingebunden. Aber das Overlay fehlt halt. Ich mag die Dinger übrigens echt. Auch wen ich Unity nicht mag, die Dinger finde ich klasse.

Falls Jemand Ideen hat: her damit! ☺

Falls Jemand Ideen hat: her damit! ☺

Bitteschön: http://www.omgubuntu.co.uk/2011/05/mimic-the-look-of-ubuntus-overlay-scrollbars-in-chromeium/

Das ist letztlich das Gleiche, was oben steht, nur als Erweiterung verpackt. Die Mouseover-Funktionalität fehlt dort aber auch.

Aah jetzt ja 😉

Ich glaube nicht das es mit css möglich ist, da sich der "Scroller" ja außerhalb des eigentlichen Fensters bewegt und css darauf normal keinen Zugriff hat.

Soweit ich das richtig verstehe gibt es sowohl die Möglichkeit des "Mouseover" als auch Bilddateien zu verwenden.

Ich bin gerade auf diese Beispielseite gestossen. Leider komme ich an das CSS-File nicht heran. Da müsste doch eigentlich was gehen?

Soweit ich das richtig verstehe gibt es sowohl die Möglichkeit des "Mouseover" als auch Bilddateien zu verwenden.

Richtig, gibt es.

Leider komme ich an das CSS-File nicht heran.

Das css steht im Quelltext.

Da müsste doch eigentlich was gehen?

Nicht so wie du dir es vorstellst, wie gesagt außerhalb des Fensters (auf der Seite sogar der einzelnen DIVs) lässt sich der Scrollbalken nicht stylen, du könntest höchstens den "Scroller" links vom Scrollbalken machen wobei ich mir jetzt nicht sicher bin wie es mit der unterschiedlichen Breite bei sichtbarem/unsichtbarem Scroller bin (der benötigte Platz würde m.W. auf jeden Fall reserviert bleiben).

Edit: nur mit reinem css ist es m.M.n. eh nicht machbar, da du den Scroller ja an der jeweiligen Mausposition darstellen willst und dazu würdest du auf jeden Fall Javascript benötigen.

Könntest du nicht zB den Balken bei Mouseover breiter werden lassen? Der Anfasser ist gut und schön, aber eh nicht perfect in Natty. Für mich würde es zB reichen, wenn das Ding einfach wächst wenn man in die Nähe kommt, damit man es auch trifft. Und ansonsten einfach nur platzsparend zeigt wo man grad ist...

Genau das habe ich mir auch schon überlegt.

Ich habe hier ein paar Infos zu den Webkit-Scrollbars entdeckt, leider aber gerade nicht die Zeit mich drum zu kümmern. Evtl. schaffe ich das morgen mal, wenn Niemand schneller ist als ich. 😉