Wie kann ich Bildlaufleisten in Mobile Safari anzeigen lassen?

Question

Das jQuery Zeitauswahl-Plugin, das ich geschrieben habe, verwendet ein div als den umschließenden Block für die Liste der Zeiten, und auf Mobile Safari gibt es keine Bildlaufleisten, um anzuzeigen, dass mehr verfügbare Zeiten als sichtbar sind. Ich weiß, mit zwei Fingern innerhalb der div (auf dem iPad mindestens) zu scrollen, aber das funktioniert nur, wenn der Benutzer weiß, dass mehr Inhalt zu scrollen zu, und es gibt keine Hinweise darauf, dass es gibt. Also, meine Frage: Hat jemand Scrollbalken in Mobile Safari angezeigt bekommen? Wie hast du es gemacht?

Answer 1

Standardmäßig werden Bildlaufleisten in iOS nicht verwendet.

Für ein div mit overflow: scroll ist die einzige native Möglichkeit, mit zwei Fingern zu scrollen.

Sie können einen Blick auf iScroll werfen, eine JavaScript-Bibliothek, die Berührungsereignisse behandelt und Single-Finger-Impuls-Scrolling (was Benutzer normalerweise in nativen Anwendungen erwarten) für divs implementiert.

Answer 2

Bis ios5 konnten Sie nicht interne divs scrollen - so dass Sie wahrscheinlich keine Bildlaufleiste sehen, wenn Sie versuchen, einen Bildlauf durchzuführen, weil es keinen gibt.

Ich habe nicht auf ios5 getestet, aber angeblich scrollt interne divs jetzt.

Wenn es kein internes Div ist, dann sollten Sie in der Lage sein, die Bildlaufleiste nur beim Scrollen zu sehen - das ist nicht mehr nur auf ios - Löwe hat auch alle nativen Scrollbalken losgeworden. Sie können sie nur sehen, wenn ein Fenster scrollt oder wenn das Fenster zum ersten Mal geladen wird.

Answer 3

In Bezug auf die ursprüngliche Frage: die beste Lösung für Bildlaufleisten wäre die Verwendung einer externen Bibliothek (bereits empfohlen iScroll ist gut, aber auch jQuery UI itself contains scrollbars). Die Anzeige von immer vorhandenen Bildlaufleisten kann jedoch von der allgemeinen iOS-Benutzeroberfläche abweichen (siehe unten).

Alternative wäre, mit anderen GUI-Elementen anzuzeigen, dass der Inhalt scrollbar ist. Berücksichtigen Sie kleine Farbverlaufsfelder am Ende des Elements (der Inhalt wird dort in den Hintergrund eingeblendet), die darauf hinweisen, dass der Inhalt beim Berühren und Scrollen fortgesetzt wird.

In iOS5 overflow: scroll Funktionen, wie erwartet, das heißt es kann den die div/unten durch die Abmessungen der div angegeben mit einem Finger im Bereich nach oben gescrollt werden. Das scrollbare div verfügt jedoch nicht über Scrollbalken. Dies unterscheidet sich ein wenig von der allgemeinen Benutzeroberfläche in iOS (5). Im Allgemeinen gibt es auch keine Bildlaufleisten, aber sie erscheinen, wenn der Benutzer einen Inhaltsbereich scrollt und nach dem Stoppen des Berührungsereignisses wieder ausblendet.

Answer 4

Mobile Safari, soweit ich gesehen habe, wird keine Scrollbars unterstützen. Das beste Plugin, das ich finden könnte, um den Job zu erledigen, ist this.

Die Demos sind verfügbar here. Es hat auch mehrere predefined skins für Ihre Anwendung.

hier eine Probe von dem, was man bekommt -

Answer 5

Sie verwenden iOS5 Unter der Annahme.0 oder später, ich glaube, Sie folgende zu verwenden:

-webkit-overflow-scrolling: auto (dies ist Standard-Stil)

auto: ohne Schwung Ein Finger-Scrollen.

Der andere verfügbare Stil ist

-webkit-overflow-scrolling: touch

touch: Gebürtig-Stil Scrollen. Wenn Sie diesen Stil angeben, wird ein Kontextzuordnungskontext (wie Deckkraft, Masken und Transformationen) erstellt.

Im Modus touch ist die Bildlaufleiste sichtbar, wenn der Benutzer berührt und scrollt, aber verschwindet, wenn er nicht verwendet wird. Wenn Sie es immer sichtbar machen wollen, dann wird dies old post Ihnen helfen:

::-webkit-scrollbar { 
    -webkit-appearance: none;// you need to tweak this to make it available.. 
    width: 8px; 
} 

Ein weiteres Stück Code für Thumb von @BJMC:

::-webkit-scrollbar-thumb { 
    border-radius: 4px; 
    background-color: rgba(0,0,0,.5); 
    box-shadow: 0 0 1px rgba(255,255,255,.5); 
} 

Original Source

Edit: in Bezug auf this demo's Verhalten sollten Sie jQuery verwenden, weil es Ihnen sehr helfen wird, $(document).ready(function(){//your code with timer}) Code mit Timer wird benötigt die CSS-Eigenschaft normal nach gewünschten Zeit zurückzustellen (wir 5 s sagen.)

Für die Demo (die Sie beschrieben haben), das mit dem onhover Ereignis ausgelöst wird, überprüfen Sie bitte diese fiddle ich dafür geschaffen haben.

Das gibt die Ergebnisse in einem Desktop-Browser wieder und funktioniert auch auf dem iPad. Fügen Sie einfach Ihren Timer-Code hinzu, der Ihren Anforderungen entspricht.

Answer 6

Um Sam Hasler Kommentar oben zu beantworten. Nicescroll 3 ist ein jquery-Plugin, das genau das tut, was Sie mit dem Ein-/Ausblendeffekt erreichen wollen und in allen gängigen Mobile/Tablet/Desktop-Browsern funktionieren.

Live demo

Code:

$(document).ready(function() {  
    $("html").niceScroll({styler:"fb",cursorcolor:"#000"}); 
    $("#divexample1").niceScroll();//or styles/options below 
    $("#divexample2").niceScroll("#wrapperexample2",{cursorcolor:"#0F0",boxzoom:true}); 
    $("#divexample3").niceScroll("#divexample3 iframe",{boxzoom:true}); 
    }); 

Answer 7

Wenn Sie das Buch zu sein, immer sichtbar haben wollen,

Nicht gesetzt -webkit-overflow-scrolling: touch

dann gesetzt benutzerdefinierten Stil für Scrollbar

::-webkit-scrollbar { 
    -webkit-appearance: none;// you need to tweak this to make it available.. 
    width: 8px; 
} 

Sie verlieren den Momentum-Effekt, aber Scrollbalken wird immer da sein.

(getestet unter iPhone 4/iOS 7)