web-dev-qa-db-de.com

Reibungsloser Scrollen im nativen Stil mit aktivierter Beschleunigung/Verzögerung IOS using overflow-x: scrollen; scrollbares div mit CSS

Verwenden eines scrollbaren div 

.scrollable-div{
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}

DEMO Bei Android-Geräten ist das Scrollen beim Wischen gleichmäßig und weist sogar Beschleunigung und Verzögerung auf.

Der gleiche Code auf einem iPhone, das Scrollen ist steif. Wenn der Benutzer die Berührung loslässt, stoppt der Bildlauf sofort.

Wie kann das iPhone das scrollbare Div wie einen Android-Browser behandeln, mit sanftem Beschleunigen/Abbremsen im nativen Stil?

ioscsshtml5css3mobile
44
Aaron

Mit overflow können Sie ein Bildlauf im nativen Stil für ein HTML-Element erhalten, indem Sie die folgende proprietäre CSS-Eigenschaft verwenden:

-webkit-overflow-scrolling: touch;

Es hat jedoch einige Vorbehalte. Je nachdem, was sich in dem Element befindet, ist das Rendern möglicherweise etwas kaputt. Daher sollten Sie es testen und prüfen, ob es Ihren speziellen Anforderungen entspricht. Ich bin mir auch nicht sicher, ob es richtig funktioniert, wenn Sie overflow-y: hidden angeben. Wenn dies nicht der Fall ist, sollten Sie in der Lage sein, es zum Laufen zu bringen, indem Sie mit verschiedenen Werten für overflow-x, overflow-y und overflow herumspielen (auto scheint nicht zu funktionieren).

Wenn Sie möchten, können Sie overflow-y: hidden mit Ihrer div fälschen, indem Sie eine zweite verschachtelte div mit dem Inhalt erstellen und diese Eigenschaft darauf setzen. Aber ich hoffe das ist nicht nötig.

106
Marco Aurélio

Der Vorschlag von Marco Aurélio ist eigentlich die beste Lösung. Am besten funktioniert es, wenn Sie overflow-y: scroll UND das Element -webkit-overflow-scrolling: touch hinzufügen. Sie erhalten ein Bildgefühl, das dem Einheimischen ähnelt

1
Dionys Lucifer

Ok, das funktioniert für mich: 

body, html { 
   overflow-x:hidden; 
   -webkit-overflow-scrolling: touch;
}
0
meck373