HTML DIV auf Smartphones scrollen

[avals]

Hallo,

wie kann man den Inhalt eines bestimmten DIV auf einem Smartphone scrollbar machen?

Habe es bereits mit nachfolgender CSS-Classe versucht aber irgendwie klappt es nicht

-webkit-overflow-scrolling: touch;

Jemand eine Vermutung was ich falsch mache?

 

[benneq]

Du könntest es mal mit jQuery Mobile versuchen oder einem ähnlichen Framework, dann musst du dich auch nicht mehr um die verschiedenen Browser kümmern.

 

[avals]

Für jQuery Mobile müsste ich dann wahrscheinlich eine zusätzliche Subdomain einrichten? Wenn ich mir so die Referenz-Projekte angucke, da schaut dann die Adresse immer wie folgt aus "m.domaind.tld".

Habe mein Theme eigentlich bereits mit CSS soweit angepasst, dass es auf die jeweilige Bildschirm-Größe skaliert wird, nur lassen sich leider die Slider-Elemente auf der Startseite nicht per Finger-Touch durchscrollen, sondern nur per Klick auf die Schaltflächen nach links bzw. rechts durchklicken.

Es geht mir primär um den Slider auf der in meiner Signatur verlinkten Webseite.

 

[Daaron]

1.) Subdomains sind Unsinn. Das sind Lösungen für Deppen, die kein Responsive Design können, sondern statt dessen ein reines Mobile-Layout mit angepasstem Content ausliefern.
2.) Gute Slider haben entweder von Haus aus oder per Plugin Touch-Fähigkeiten.

 

[avals]

Kann beiden Punkten nur zustimmen ;-)

Zu Punkt 1: deswegen habe ich mein Theme auch bereits lokal in XAMPP angepasst ohne ein zusätzliches mobiles Theme.

Zu Punkt 2: das ist mir auch klar, bloß verwende ich bereits einen Slider auf meiner Webseite mit dem ich total zufrieden bin und würde nur ungerne zu einem anderen Plugin wechseln.

 

[Daaron]

Wie wärs mit nem Alternativplan:
- http://plugins.jquery.com/event.swipe/ <- irgend sowas in der Art einbetten, damit du Swipe-Events hast
- dem Slider n onSwipe geben. Jetzt bei einem Swipe nach links/rechts jeweils ein Click-Event auf den linken/rechten Steuerbutton auslösen

 

[avals]

Der Tipp ist klasse, genau die Funktionen hätte ich für meinen Slider gerne.

Ich hatte jedoch bisher noch nichts mit jQuery zu tun, wüsste jetzt auch gar nicht wo ich anfangen soll, daher wäre eine Lösung auf CSS-Basis wahrscheinlich die bessere für mich.

 

[CapFuture]

Das Scrollen ist rein über CSS möglich. Dir fehlt hier einfach ein overflow-y: auto bzw. overflow-y: scroll.
Die Direktive muss aber im umschließenden <div> liegen und der Inhalt muss höher/länger sein, damit das Scrollen funktioniert.

-webkit-overflow-scrolling: touch dient dazu, dass der Gummiband-Effekt richtig funktioniert. Anderenfalls scrollt das Div nur solange man die Scrollgeste macht.

 

[Daaron]

Ich bezweifle, dass eine CSS-Lösung bei einem Slider (der ja JS-basiert ist) überhaupt einen Stich sieht. Im Zweifel sorgen irgendwelche Overflow-Einstellungen nur dafür, dass der Slider gar nicht mehr korrekt funktioniert.

Der Slider ist jQuery - basiert, also sollte das aus ihm resultierende Problem auch mit jQuery bereinigt werden. Oder aber, man setzt gleich auf einen 100% mobile tauglichen responsive Slider, z.B. Caroufredsel.

Mein Lösungsansatz ist nicht schwer, ein paar grundlegende JavaScript-Geschichten sollte man kennen, der Rest ergibt sich aus der jQuery-Dokumentation.

 

[CapFuture]

Naja, scrollbare Divs und Slider sind schon ein kleiner Unterschied... Meine Aussage war für Divs korrekt, jedoch für Sliders zu wenig.

Ich würde hier den BxSlider empfehlen. Einfach in der Struktur, Handhabung und Wartbarkeit.

 

[avals]

Habe es früher schon mal mit overflow-y: auto und overflow-y: scroll versucht, hat nicht funktioniert.

Ich denke werde mir mal die JavaScript Basics mal anschauen, da gibts sicherlich auch einige interessante Sachen die man damit anstellen kann.