hansW: scrollbar css styles???

Tag.

Gibt es ausserhalb von webkit css styles zur Customisierung von Scrollbalken??
Alles, was ich da google zeigt bei IE und FF nicht die geringste Wirkung.

Weiß wer was css-only??

Danke

  1. Mahlzeit,

    Vielleicht sollte ich mir das mal auf nen Hotkey legen:

    Die Scrollbalken gehören nicht zur Webseite sondern zum Betriebssystem.
    Wenn du sie bei dir selbst ändern willst, kannst du das im Betriebssystem machen, bei anderen Usern gehen dich die Scrollbalken nichts an.

    --
    42
    1. Meine Herren!

      Vielleicht sollte ich mir das mal auf nen Hotkey legen:

      Die Scrollbalken gehören nicht zur Webseite sondern zum Betriebssystem.

      Ich finde das muss differenzierter betrachtet werden. Ohne Frage darf eine Custom-Scrollbar nicht weniger der UX dienen, als die Standard-Scrollbars das machen. Ist das aber gewährleistet darf eine Scrollbar vom System-Theme ruhig abweichen.

      In seltenen Fällen kann eine Custom-Scrollbar sogar die Erwartungen des Benutzer übertreffen und die UX damit verbessern. Für mein Notepad++ auf der Arbeit habe ich meine Scrollbar zum Beispiel durch eine recht breite Miniuatur-Ansicht des Quelltextes ersetzt, damit kann ich spürbar schneller in meinem Code navigieren.

      --
      “All right, then, I'll go to hell.”
      1. Mahlzeit,

        Ich finde das muss differenzierter betrachtet werden. Ohne Frage darf eine Custom-Scrollbar nicht weniger der UX dienen, als die Standard-Scrollbars das machen. Ist das aber gewährleistet darf eine Scrollbar vom System-Theme ruhig abweichen.

        Dann stellt sich mir die Frage, wieso es dann immer noch keinen Standard dafür gibt sondern jeder Browser sein eigenes Süppchen kocht.
        Für mich ein Zeichen, dass es nicht darf, weil die Webseite dann bewusst am Standard vorbei läuft.

        Differenzieren würde ich maximal Desktop-App und Webseite, denn in einer Desktop-App gibt es standardisierte Möglichkeiten, das Aussehen der Scrollbars zu ändern ohne irgendwelche dubiosen Hacks.

        In seltenen Fällen kann eine Custom-Scrollbar sogar die Erwartungen des Benutzer übertreffen und die UX damit verbessern. Für mein Notepad++ auf der Arbeit habe ich meine Scrollbar zum Beispiel durch eine recht breite Miniuatur-Ansicht des Quelltextes ersetzt, damit kann ich spürbar schneller in meinem Code navigieren.

        Du vergleichst eine Webseite mit der GUI eines Programmes. IMO nicht wirklich vergleichbar.
        Wenn ich eine Browserapplikation habe, bei der ich als "Systemvorraussetzung" die Scrollbars änderer, kann ich das auf anderen Wegen machen.

        --
        42
        1. @@M.:

          nuqneH

          Du vergleichst eine Webseite mit der GUI eines Programmes. IMO nicht wirklich vergleichbar.

          Warum nicht? Die Grenzen zwischen interktiver Webseite und lokal laufenden Apps (= Programmen) verschwimmen immer mehr.

          Qapla'

          --
          „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
        2. Es geht bei mir um einen Scrollbaken auf der Seite eines Warenkorb-Widgtes im WebShop.
          Da es nur ein Widget ist, ist es klein, soll aber schon funktionieren. Jedes Pixel hilft, bzw anders gesagt sind 16px für den Scrollbalken einfach nur unschön und man könnte sich fragen, ob man da keine bessere Lösung hinbekommen sollte:

          http://www.img-host.de/bild.php/45870,wkU8VA7.jpg

          1. Hallo,

            Da es nur ein Widget ist, ist es klein, soll aber schon funktionieren. Jedes Pixel hilft, bzw anders gesagt sind 16px für den Scrollbalken einfach nur unschön ...

            eben, denn bei nur 16px muss man schon recht genau "zielen". Natürlich ist das möglich, aber dennoch ärgerlich.

            Auf einem Desktop-Bildschirm(!) halte ich ca. 20px für die Scrollbar-Breite schon für ein absolutes Mindestmaß. Bei Mobilgeräten oder anderen Anwendungen mit kleinen Displays mag das wieder anders aussehen.

            Und hier liegt genau die Crux: Du weißt nicht, auf was für einem Display und in welcher relativen Größe deine Website angezeigt wird. Deshalb ist die Angabe fester Pixel-Größen für Navigations- und Bedienelemente eine schlechte Idee.

            Angenommen, ich hätte Schwierigkeiten mit meiner Feinmotorik (Parkinson oder so), dann stelle ich mir in meinem GUI die Scrollbalken natürlich recht breit ein - möglichweise 30px oder mehr. Und dann kommst du und stauchst sie mir auf die Hälfte zusammen. Meine Begeisterung kannst du dir vorstellen. ;-)

            Ciao,
             Martin

            --
            Der Klügere gibt solange nach, bis er der Dumme ist.
            Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
            1. Mahlzeit,

              Bei Mobilgeräten oder anderen Anwendungen mit kleinen Displays mag das wieder anders aussehen.

              Da ist der Scrollbalken so gross wie der Viewport des Elementes. Egal wo ich slide, es wird gescrollt. Da reicht es, wenn die angezeigte Scrollbar nur 4 Pixel breit ist und dann wieder ausgeblendet wird.

              --
              42
            2. Ich bin froh über jeden, der nicht mit dem Mobilgerät meine Ware bestellt...geht eh nur in die Hose und das falsche Teil kommt an. Man sollte schon irgendwie in der Lage sein, den kompletten Informationsumfang zu erfassen....daher zB kein responsive Design.

              Und um ehrlich zu sein, habe ich so eine genaue Vorstellung auch nicht von dem Scrollbalken, den ich gerne hätte...ich wollte halt mal rumspielen und sehen, was im Angebot ist. ZB sollten alleine Pfeilfelder ausreichen, also ohne Scrollbalken.

              1. Hallo,

                Man sollte schon irgendwie in der Lage sein, den kompletten Informationsumfang zu erfassen....daher zB kein responsive Design.

                Das ist aber ein Widerspruch in sich! Wie soll man den ganzen Informationsumfang erfassen, wenn man auf mobilen Oberflächen ständig raus- und reinzoomen und die GUI hin- und herschieben muss?!

                Viele Grüße
                Siri

                1. Das kann man auch anders sehen. Ist irgendwie ne Art Geschmacksfrage.

                  Und ja, ist in der Tat so, daß ich gerne auf 50%-Wahrscheinlichkeit Rücklaufbestellungen verzichte. Kriterium ist dabei klar gegen hirnlose Smartphonebestellungen - einfach ein Erfahrungswert. 1200 horizontale Pixel sind ja eigentlich auf jedem besseren Smartphoneknochen eh vorhanden und mit gutem Visus und funktionierender Feinmotorik auch handzuhaben. Dabei bin ich kein SmartphoneuseraddictedNazi, naja evtl etwas, sondern will einfach immer lieber schwarze als rote Zahlen sehen.

                  Ne, der Shop ist also kein Hobby von mir. Davon lebe ich. Nur bin ich nicht der ganz große Liebhaber von html und sonstigem Gefummel.
                  Es geht ja nur um ein widget, das per Klick eine große Version des Warenkorbs öffnet. Auf hirnlosen Endgeräten muß man halt dann einfach die große Ansicht anwenden.

                  Und Document Map ist ja absolut fein! Ein Traum zu Notepad!

                  1. Meine Herren!

                    Das kann man auch anders sehen. Ist irgendwie ne Art Geschmacksfrage.

                    Nein, das ist die Anwendung von Forschungs-Ergebnissen und intensiven (Markt-)Beobachtungen, sowie Erfahrungswerten.

                    Und ja, ist in der Tat so, daß ich gerne auf 50%-Wahrscheinlichkeit Rücklaufbestellungen verzichte.

                    Man muss kein Mathe studiert haben, um das nachzuprüfen. Ich lehne mich mal aus dem Fenster und zweifel das an.

                    Kriterium ist dabei klar gegen hirnlose Smartphonebestellungen - einfach ein Erfahrungswert.

                    Ist das die Freundlichkeit, mit der du deinen Kunden begegnest? Da würde ich auch reklamieren.

                    1200 horizontale Pixel sind ja eigentlich auf jedem besseren Smartphoneknochen eh vorhanden und mit gutem Visus und funktionierender Feinmotorik auch handzuhaben.

                    Was die Anzahl der fehlerhaften Bestellvorgänge widerlegt.

                    Dabei bin ich kein SmartphoneuseraddictedNazi, naja evtl etwas, sondern will einfach immer lieber schwarze als rote Zahlen sehen.

                    Und gehst dabei immer lieber destruktiv als konstruktiv vor.

                    Ne, der Shop ist also kein Hobby von mir. Davon lebe ich. Nur bin ich nicht der ganz große Liebhaber von html und sonstigem Gefummel.

                    "Ich betreibe einen Tante-Emma Laden, mag aber keine Regale und stelle meine Waren deshalb auf dem versifften Teppich aus"

                    Es geht ja nur um ein widget, das per Klick eine große Version des Warenkorbs öffnet. Auf hirnlosen Endgeräten muß man halt dann einfach die große Ansicht anwenden.

                    Deine Vorstellungen von einem gelungenen Web-Auftritt befremden mich.

                    --
                    “All right, then, I'll go to hell.”
                  2. Mahlzeit,

                    Das kann man auch anders sehen. Ist irgendwie ne Art Geschmacksfrage.

                    Stimmt, wenn es dein Geschmack ist, Geld wegzuwerfen, dann ist deine Ansicht natürlich die Richtige.

                    Ne, der Shop ist also kein Hobby von mir. Davon lebe ich.

                    Dann kann ich deine Aussagen nur noch als Dummheit bezeichnen. Sorry, aber was anderes ist es nicht.

                    --
                    42
              2. @@hansW:

                nuqneH

                Ich bin froh über jeden, der nicht mit dem Mobilgerät meine Ware bestellt...

                Oder anders gesagt: Du bist froh über jeden der nicht deine Ware bestelt, sondern woanders einkauft.

                Nutzer nutzen das Gerät, was sie gerade zur Hand haben. Viele haben schon jetzt gar kein Desktop-Gerät mehr, Tendenz steigend.

                Wenn du in 2 Jahren immer noch was verkaufen möchtest, solttest du jetzt deine Einstellung zu Mobilgeräten ändern.

                Qapla'

                --
                „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                1. @@Gunnar Bittersmann:

                  nuqneH

                  Oder anders gesagt: Du bist froh über jeden der nicht deine Ware bestelt, sondern woanders einkauft.

                  Nutzer nutzen das Gerät, was sie gerade zur Hand haben. Viele haben schon jetzt gar kein Desktop-Gerät mehr, Tendenz steigend.

                  Wie man leicht sieht, hatte ich jenes Posting auf dem Smartphone getippt. Da kann schon mal ein Komma und ein l verlorengehen. ;-)

                  Qapla'

                  --
                  „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
              3. Mahlzeit,

                Ich bin froh über jeden, der nicht mit dem Mobilgerät meine Ware bestellt...

                Also betreibst du den Shop nur als Hobby und der Umsatz ist dir egal?
                Dann solltest du von dem Aufwand absehen, den du betreibst, der rentiert sich nicht.

                --
                42
              4. Meine Herren!

                ZB sollten alleine Pfeilfelder ausreichen, also ohne Scrollbalken.

                Schade, dass du den Artikel, den ich verlinkt habe, nicht gelesen hast. Da steht drin, dass Pfeile alleine eben nicht die UX-Ansprüche erfüllen, die an sie gestellt werden.

                --
                “All right, then, I'll go to hell.”
            3. @@Der Martin:

              nuqneH

              Auf einem Desktop-Bildschirm(!) halte ich ca. 20px für die Scrollbar-Breite schon für ein absolutes Mindestmaß. Bei Mobilgeräten oder anderen Anwendungen mit kleinen Displays mag das wieder anders aussehen.

              Ganz anders. Es gibt gar keine Scrollbars in dem Sinne. Man scrollt mit Gesten auf dem gesamten Bildschirm. Während des Scrollens erscheint ein Indikator, an welcher Stelle man sich auf der Seite befindet.

              Übrigens ist das auf manchen Desktop-Geräten genauso. Ich habe schon ewig keine echte Scrollbar mehr gesehen. In welchem Museum gibt’s die zu bestaunen? ;-)

              Qapla'

              --
              „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
          2. Mahlzeit,

            ok, das ist jetzt natürlich eine Anwendung, die dein Vorhaben sinnvoll machen kann.
            Da du aber nicht sicherstellen kannst, dass die Formatierung der Scrollbalken funktioniert, darfst du dich nicht drauf verlassen. Es muss also auch mit den normalen Scrollbalken funktionieren.

            Auch musst du bedenken, dass ein User evtl. noch grössere Scrollbalken eingestellt haben kann, evtl. wegen Touchbedienung eines Desktop-PCs

            Ich nutze als Workaround ein jQuery-Plugin, da ich jQuery eh schon integriert hab. Wenn kein javascript aktiviert ist, wird der normale Scrollbalken angezeigt.

            --
            42
        3. Hallo,

          Dann stellt sich mir die Frage, wieso es dann immer noch keinen Standard dafür gibt sondern jeder Browser sein eigenes Süppchen kocht.

          Das hat handfeste technische Gründe: Welche Mechanismen ein User-Agent bereitstellt, um Inhalte auf einer Website zugänglich zu machen, ist dem User-Agent überlassen. Ob es Scrollbars gibt und wie diese Aussehen, unterscheidet sich stark zwischen GUIs und Browsern. Das hat sich alleine in den letzten Jahren radikal verändert. Daher ist es schwierig bis unmöglich, hier etwas bleibendes zu standardisieren, das plattformübergreifende Gültigkeit hat.

          Zumal neuere GUIs wie iOS 7 dazu übergegangen sind, den Browser-Chrome automatisch an die Farben der Website anzupassen. Wenn eine solche Logik existiert, ist es unnötig, per CSS Teile des Browsers zu formatieren, damit sie sich nicht mit dem Website-Design beißen.

          Du vergleichst eine Webseite mit der GUI eines Programmes. IMO nicht wirklich vergleichbar.

          Aus Usability-Sicht ist eine Website auch nur ein weiteres UI. Das Gehirn, die menschliche Wahrnehmung schaltet nicht plötzlich um, wenn sich das UI in einem Browserfenster befindet.

          Mathias

          1. Mahlzeit,

            Das hat handfeste technische Gründe: Welche Mechanismen ein User-Agent bereitstellt, um Inhalte auf einer Website zugänglich zu machen, ist dem User-Agent überlassen. Ob es Scrollbars gibt und wie diese Aussehen, unterscheidet sich stark zwischen GUIs und Browsern. Das hat sich alleine in den letzten Jahren radikal verändert. Daher ist es schwierig bis unmöglich, hier etwas bleibendes zu standardisieren, das plattformübergreifende Gültigkeit hat.

            Kann ich nicht widersprechen ;)
            Ich seh es aber grundsätzlich als verwirrend an, wenn die Browserscrollbar auf einmal anders aussieht als bei anderen Programmen. Ich kenne die panischen Anrufe, ob es vielleicht ein Virus ist, bei auf der Seite XY die Scrollbalken ne andere Farbe bekommen ;)

            Zumal neuere GUIs wie iOS 7 dazu übergegangen sind, den Browser-Chrome automatisch an die Farben der Website anzupassen. Wenn eine solche Logik existiert, ist es unnötig, per CSS Teile des Browsers zu formatieren, damit sie sich nicht mit dem Website-Design beißen.

            Die Farbe sehe ich nicht direkt als Problem, sondern eher, wie der OP will, wenn die Grösse verändert wird.
            Der Webseitenbetreiber meint vielleicht ein Scrollbalken mit 2px ist stylisch, auf nem hochauflösenden Display ist der aber nicht zu bedienen, weil er nur 0.5mm breit ist.

            Wenn ein Browser die Möglichkeit bietet, die Farbe der Scrollbars nach der Webseite einzufärben, ist das ein Feature, dass durchaus praktisch sein kann.

            Aus Usability-Sicht ist eine Website auch nur ein weiteres UI. Das Gehirn, die menschliche Wahrnehmung schaltet nicht plötzlich um, wenn sich das UI in einem Browserfenster befindet.

            Ich stimme dir zu, aus Sicht des Entwicklers ist es aber ein grosser Unterschied, da ich im Browser nur durch Hacks die Scrollbars ändern kann, in einer nativen Anwendung, die ja für nur eine Plattform programmiert wird, geht das per API (zumindest unter Gnome/GTK und KDE, unter Windows vermutlich auch)

            Aktuell vertrete ich aber weiterhin die Meinung, alles, was zum Betriebssystem gehört, geht den Seitenautor nix an ;)

            --
            42
            1. Hallo,

              Ich seh es aber grundsätzlich als verwirrend an, wenn die Browserscrollbar auf einmal anders aussieht als bei anderen Programmen. Ich kenne die panischen Anrufe, ob es vielleicht ein Virus ist, bei auf der Seite XY die Scrollbalken ne andere Farbe bekommen ;)

              ja, genau. Die Verunsicherung weniger erfahrener Nutzer ist ein Punkt, die klare visuelle Abgrenzung ein anderer.

              Die Farbe sehe ich nicht direkt als Problem, sondern eher, wie der OP will, wenn die Grösse verändert wird.

              Es geht immer um zwei Aspekte: Ästhetik und Usability. Eine Einfärbung der Scrollbars beeinträchtigt nicht die Usability - vorausgesetzt, die Farben sind nicht so gewählt, dass man das Element mangels Kontrast kaum noch erkennt. Aber mein Gefühl für Ästhetik möchte trotzdem, dass Elemente, die mein Computer bzw. mein GUI beisteuert, auch so aussehen wie ich es gewöhnt bin.

              Wenn ein Browser die Möglichkeit bietet, die Farbe der Scrollbars nach der Webseite einzufärben, ist das ein Feature, dass durchaus praktisch sein kann.

              Ja, wenn es mit Bedacht eingesetzt wird. Ich habe tatsächlich schon Webseiten gesehen, auf denen die Scrollbars quasi unsichtbar waren, weil der Autor gemeint hat, ein Ton-in-Ton-Farbschema wäre schick.

              Aus Usability-Sicht ist eine Website auch nur ein weiteres UI. Das Gehirn, die menschliche Wahrnehmung schaltet nicht plötzlich um, wenn sich das UI in einem Browserfenster befindet.

              Eben. Deswegen sollen Bedienelemente bitte auch innerhalb des Browserfensters so aussehen, wie ich es auch sonst gewöhnt bin.

              Aktuell vertrete ich aber weiterhin die Meinung, alles, was zum Betriebssystem gehört, geht den Seitenautor nix an ;)

              ACK. Und ich bin seit jeher ein Freund von scharfen Abgrenzungen. Ich mag es nicht, wenn unterschiedliche Bereiche nahtlos und kaum wahrnehmbar ineinander übergehen.

              Ciao,
               Martin

              --
              Die junge Ehefrau weint sich bei ihrer Mutter aus:
              Er hat gesagt, ich soll mich zum Teufel scheren! - Und da kommst du ausgerechnet zu mir?!
              Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
      2. Moin,

        Für mein Notepad++ auf der Arbeit habe ich meine Scrollbar zum Beispiel durch eine recht breite Miniuatur-Ansicht des Quelltextes ersetzt, damit kann ich spürbar schneller in meinem Code navigieren.

        So ein Plugin suche ich unbedingt :) Verrätst du mir, wie du das gemacht hast?

        Grüße Marco

        --
        Ich spreche Spaghetticode - fließend.
        1. Meine Herren!

          Für mein Notepad++ auf der Arbeit habe ich meine Scrollbar zum Beispiel durch eine recht breite Miniuatur-Ansicht des Quelltextes ersetzt, damit kann ich spürbar schneller in meinem Code navigieren.

          So ein Plugin suche ich unbedingt :) Verrätst du mir, wie du das gemacht hast?

          Das Plugin nennt sich Document Map und ist in neueren Versionen schon vorinstalliert: Ansicht -> Miniuaturansicht (oder englisch: View -> Document Map)

          --
          “All right, then, I'll go to hell.”
          1. Moin,

            Das Plugin nennt sich Document Map und ist in neueren Versionen schon vorinstalliert: Ansicht -> Miniuaturansicht (oder englisch: View -> Document Map)

            Sehr schön, danke ;)

            Grüße Marco

            --
            Ich spreche Spaghetticode - fließend.
  2. Hallo,

    Gibt es ausserhalb von webkit css styles zur Customisierung von Scrollbalken??

    der erste Browser, der das eingeführt hat, war AFAIR der IE. Opera hat irgendwann nachgezogen, bei FF bin ich mir nicht sicher.

    Die Opera-Entwickler haben sich aber zum Glück entschlossen, diese Möglichkeit in der Defaulteinstellung wieder zu deaktivieren, auch im IE konnte man den Unfug immer verhindern, und selbst da ist es mittlerweile nicht mehr in der Defaulteinstellung aktiv.

    Alles, was ich da google zeigt bei IE und FF nicht die geringste Wirkung.

    Und das ist gut so.

    So long,
     Martin

    --
    Zwei Freundinnen tratschen: "Du, stell dir vor, die Petra kriegt ein Kind!" - "Ich kann mir schon denken, von wem." - "Dann ruf sie mal schnell an, das würde ihr bestimmt weiterhelfen."
    Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
    1. Ich halte das nicht für gut.
      Denn dann muß ich kucken, daß mit js zu lösen.
      Brauche einfach in dem einen Fall ne schmalere Lösung...

      Danke

      1. Moin

        Denn dann muß ich kucken, daß mit js zu lösen.
        Brauche einfach in dem einen Fall ne schmalere Lösung...

        Dann erklär mal, wo das problem liegt. Warum benötigst du eine schmalere Variante?

        Es ist gut, dass Standard-Systemelemente unveränderlich sind (bzw von der Systemeinstellung abhängen).

        Gruß Bobby

        --
        -> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
        ### Henry L. Mencken ###
        -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
        ## Viktor Frankl ###
        ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
      2. @@hansW:

        nuqneH

        Denn dann muß ich kucken, daß mit js zu lösen.

        Nein, tu es nicht!

        Qapla'

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
      3. Mahlzeit,

        Brauche einfach in dem einen Fall ne schmalere Lösung...

        Dann brauchst du entweder eine Lösung für einen bestimmten Browser auf einer ganz bestimmten Plattform (unter Android sieht die Scrollbar ganz anders aus und wird, bei Nichtbenutzung ausgeblendet (Dolphin, Chrome)) oder du hast einen massiven Konzeptfehler in deiner Seite.

        Also, welcher Browser auf welcher Plattfrom ist es? Bei dem Wissen ist dein Problem keins mehr.

        --
        42