ssc: Mobile Browser – Scrollbalken für ein div anzeigen

Hallo Zusammen,

ich bin Anfängerin und benötige dringend Hilfe. Ein div soll einen Scrollbalken bekommen. Dieser soll auch für die mobilen Browser optimiert sein. Ich habe mehrere Sachen ausprobiert und finde keine Lösung, wie der Scrollbalken auch auf meinem Handy (ich teste mit einem iPhone und Safari) angezeigt wird.

Versucht habe ich zuletzt folgendes: https://jsfiddle.net/yokknkzn/

Auf meinem Handy wird der Scrollbalken nicht angezeigt und der Text im div-Block abgeschnitten. Womöglich ist dieser Weg nicht der Richtige, dann wäre ich sehr dankbar für jede andere Lösung. ;)

Schon einmal vielen Dank!

  1. Hej ssc,

    Ein div soll einen Scrollbalken bekommen. Dieser soll auch für die mobilen Browser optimiert sein. Ich habe mehrere Sachen ausprobiert und finde keine Lösung, wie der Scrollbalken auch auf meinem Handy (ich teste mit einem iPhone und Safari) angezeigt wird.

    Ohne es auszuprobieren, frage ich einfach mal zurück: klappt es nicht mit Overflow: auto?

    Marc

    1. "overflow: auto" hat leider nicht funktioniert, habe ich ausprobiert...

      1. Hej ssc,

        "overflow: auto" hat leider nicht funktioniert, habe ich ausprobiert...

        Weil ich es einfach nicht glauben konnte, habe ich es jetzt auch mal ausprobiert. Bei mir funktioniert es:

        http://self.mhis.de/overflowAuto/

        Vielleicht irgendwo ein Tippfehler oder drüber im Code eine Klammer, vergessen, Kommentar nicht geschlossen, Buchstabendreher, zu viel oder zu wenig Tüddelchen, Groß-Klein-Schreibung der Klassen/IDs nicht korrekt... ?

        Marc

  2. Ein div soll einen Scrollbalken bekommen. Dieser soll auch für die mobilen Browser optimiert sein. Ich habe mehrere Sachen ausprobiert und finde keine Lösung, wie der Scrollbalken auch auf meinem Handy (ich teste mit einem iPhone und Safari) angezeigt wird.

    Dann scroll doch trotzdem einfach mal! :-)

    Selbst OSX (je nach Konstellation) hast Du den Effekt.

    1. Das Scrollen der ganzen Seite ist kein Problem, aber ich möchte ja den Text innerhalb des div-Blocks scrollen können. Momentan wird er ja einfach abgeschnitten und lässt sich nicht bewegen. Am Desktop ist funktioniert alles einwandfrei...

      1. aber ich möchte ja den Text innerhalb des div-Blocks scrollen können. Momentan wird er ja einfach abgeschnitten und lässt sich nicht bewegen. Am Desktop ist funktioniert alles einwandfrei...

        Hast Du das ausprobiert, oder vermutest Du es nur, weil Du keine Scrollbalken siehst?

        1. Oh je...ich habe gestern den ganzen Tag rumprobiert und wie bekloppt auf meinem Handy rumgewischt und gerade eben...es funktioniert! Danke! Könnte man den Scrollbalken denn dauerthaft anzeigen lassen?

          1. Könnte man den Scrollbalken denn dauerthaft anzeigen lassen?

            Mir ist kein Touch-Device bekannt, bei dem das geht. Surface vielleicht, keine Ahnung. Du müsstest die Funktion per JavaScript nachbauen, was nicht empfehlenswert ist...

            1. Ok, dann lasse ich es erst einmal so. Vielen Dank!

          2. Hej ssc,

            Oh je...ich habe gestern den ganzen Tag rumprobiert und wie bekloppt auf meinem Handy rumgewischt und gerade eben...es funktioniert! Danke! Könnte man den Scrollbalken denn dauerthaft anzeigen lassen?

            Nicht, dass ich wüsste, es sei denn mit JavaScript.

            das hier sieht ganz nett aus:

            perfect-scrollbar

            Habe ich aber auch nur mal auf die Schnelle rausgesucht, keine Garantie, dass das für alle Geräte/Browser funktioniert. Musst dich da auf die Doku verlassen und selber testen...

            Marc

            1. Hej ssc,

              Oh je...ich habe gestern den ganzen Tag rumprobiert und wie bekloppt auf meinem Handy rumgewischt und gerade eben...es funktioniert! Danke! Könnte man den Scrollbalken denn dauerthaft anzeigen lassen?

              Nicht, dass ich wüsste, es sei denn mit JavaScript.

              das hier sieht ganz nett aus:

              perfect-scrollbar

              Habe ich aber auch nur mal auf die Schnelle rausgesucht, keine Garantie, dass das für alle Geräte/Browser funktioniert. Musst dich da auf die Doku verlassen und selber testen...

              Marc

              Ok, danke, schaue ich mir mal an.

              1. Hej ssc,

                perfect-scrollbar

                Ok, danke, schaue ich mir mal an.

                Ich habe meinen Beitrag noch um einen Hinweis ergänzt. Bitte noch mal lesen ;-)

                Marc

                1. Hej marctrix,

                  Hej ssc,

                  perfect-scrollbar

                  Ok, danke, schaue ich mir mal an.

                  Ich habe meinen Beitrag noch um einen Hinweis ergänzt. Bitte noch mal lesen ;-)

                  Hat nicht geklappt, daher einfach hier der Hinweis:

                  Überhaupt würde ich mich Mitleser anschließen (der mal wieder schneller war): baue das nicht mit JavaScript nach, lass den Leuten die gewohnten Bedienelemente (auch wenn die dooferweise im safari nicht angezeigt werden - gefällt mir auch nicht, aber man ist es ja inzwischen gewohnt).

                  Generell sollte man sich bemühen ohne Scrollbalken auszukommen. Ist fummelig in der Bedienung und hinderlich beim Lesen, wenn man seine Finger immer wieder auf die Texte legen muss, die man lesen möchte. Es sei denn, man hat durchsichtige Finger, dann stört es nicht so arg. ;-)

                  Marc

                  1. Hej marctrix,

                    Hej ssc,

                    perfect-scrollbar

                    Ok, danke, schaue ich mir mal an.

                    Ich habe meinen Beitrag noch um einen Hinweis ergänzt. Bitte noch mal lesen ;-)

                    Hat nicht geklappt, daher einfach hier der Hinweis:

                    Überhaupt würde ich mich Mitleser anschließen (der mal wieder schneller war): baue das nicht mit JavaScript nach, lass den Leuten die gewohnten Bedienelemente (auch wenn die dooferweise im safari nicht angezeigt werden - gefällt mir auch nicht, aber man ist es ja inzwischen gewohnt).

                    Generell sollte man sich bemühen ohne Scrollbalken auszukommen. Ist fummelig in der Bedienung und hinderlich beim Lesen, wenn man seine Finger immer wieder auf die Texte legen muss, die man lesen möchte. Es sei denn, man hat durchsichtige Finger, dann stört es nicht so arg. ;-)

                    Marc

                    Das mit dem Javascript lass ich mal sein...den Scrollbalken brauche ich aber leider. In meinem konkreten Fall geht es um eine Anwenderliste, die in einem Popup angezeigt wird. Ich probiere mal weiter...

                    1. @@ssc

                      Ich probiere mal weiter...

                      Weiter?

                      LLAP 🖖

                      --
                      „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
                      „Hat auf dem Forum herumgelungert …“
                      (Wachen in Asterix 36: Der Papyrus des Cäsar)
                  2. Überhaupt würde ich mich Mitleser anschließen (der mal wieder schneller war)

                    Ich poste hier so selten... lass mich doch auch mal! ;-)

                    1. Überhaupt würde ich mich Mitleser anschließen (der mal wieder schneller war)

                      Ich poste hier so selten... lass mich doch auch mal! ;-)

                      Nicht streiten – ich habe da noch mehr Fragen auf Lager! Aber alles zu seiner Zeit! ;-)

            2. @@marctrix

              das hier sieht ganz nett aus:

              perfect-scrollbar

              Habe ich aber auch nur mal auf die Schnelle rausgesucht, keine Garantie, dass das für alle Geräte/Browser funktioniert

              Nein, keine Scrollbar zu sehen (Safari/iOS).

              LLAP 🖖

              --
              „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
              „Hat auf dem Forum herumgelungert …“
              (Wachen in Asterix 36: Der Papyrus des Cäsar)
              1. @@marctrix

                das hier sieht ganz nett aus:

                perfect-scrollbar

                Habe ich aber auch nur mal auf die Schnelle rausgesucht, keine Garantie, dass das für alle Geräte/Browser funktioniert

                Nein, keine Scrollbar zu sehen (Safari/iOS).

                LLAP 🖖

                „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
                „Hat auf dem Forum herumgelungert …“
                (Wachen in Asterix 36: Der Papyrus des Cäsar)

                Alles Klar, danke fürs Ausprobieren!

              2. Hej Gunnar,

                @@marctrix

                perfect-scrollbar

                Habe ich aber auch nur mal auf die Schnelle rausgesucht, keine Garantie, dass das für alle Geräte/Browser funktioniert

                Nein, keine Scrollbar zu sehen (Safari/iOS).

                Bei mir schon... (Das mit "Demo" überschriebene Bild, wie ich jetzt sehe aber nur, wenn man das Bild schon mal angefasst hat... - also auch nicht wirklich intuitiv...)

                Marc

          3. @@ssc

            Könnte man den Scrollbalken denn dauerthaft anzeigen lassen?

            Nicht dass ich wüsste. Das OS ist so designt, dass Scrollbalken nur im Moment des Scrollens angezeigt werden.

            Du kannst auf andere Weise verdeutlichen, dass es da was zu scrollen gibt:

            • Box-Höhe kein Vielfaches der Zeilenhöhe, so dass die letzte sichtbare Zeile angeschnitten ist.
            • Pfeil nach unten/vertikale Ellipse (⋮) anzeigen

            LLAP 🖖

            --
            „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
            „Hat auf dem Forum herumgelungert …“
            (Wachen in Asterix 36: Der Papyrus des Cäsar)