So erhalten Sie die Bildlaufleiste mit CSS-Überlauf unter iOS

Entwickeln einer iPad-Website Ich habe versucht, die CSS-Eigenschaft overflow: autozu verwenden, um die Bildlaufleisten bei Bedarf in einem zu erhalten div, aber mein Gerät weigert sich, sie anzuzeigen, selbst wenn der Bildlauf mit zwei Fingern funktioniert.

Ich habe es mit versucht

overflow: auto;

und

overflow: scroll;

und das Ergebnis ist das gleiche.

Ich teste nur auf einem iPad (auf Desktop-Browsern funktioniert einwandfrei).

Irgendwelche Ideen?

Bearbeiten Sie nach dem Kommentar von kritzikratzi :

[Beginnend] mit ios 5beta kann eine neue Eigenschaft -webkit-overflow-scrolling: touchhinzugefügt werden, die zum erwarteten Verhalten führen sollte.

Einige, aber sehr wenig weiterführende Literatur:

• Natives Momentum-Scrollen in iOS 5

Ursprüngliche Antwort für die Nachwelt.

Leider erzeugt keiner overflow: autooder scrollauf den iOS-Geräten Bildlaufleisten, anscheinend aufgrund der Bildschirmbreite, die für solche nützlichen Mechanismen benötigt würde.

Wie Sie festgestellt haben, müssen Benutzer stattdessen das overflowWischen mit zwei Fingern ausführen, um durch den Inhalt von -ed zu scrollen . Die einzige Referenz, da ich das Handbuch für das Telefon selbst nicht finden kann, ist hier: tuaw.com: iPhone 101: Scrollen mit zwei Fingern .

Die einzige Lösung, die ich mir vorstellen kann, ist, wenn Sie möglicherweise JavaScript und möglicherweise jQTouch verwenden könnten, um Ihre eigenen Bildlaufleisten für overflowElemente zu erstellen . Alternativ können Sie @ media-Abfragen verwenden , um den overflowInhalt zu entfernen und vollständig anzuzeigen. Als iPhone-Benutzer erhält dies meine Stimme, schon allein aus Gründen der Einfachheit. Zum Beispiel:

<link rel="stylesheet" href="handheld.css" media="only screen and (max-device width:480px)" />

Der vorhergehende Code stammt aus A List Apart , aus demselben Artikel, auf den oben verwiesen wurde (ich bin mir nicht sicher, warum sie von dem übrig geblieben sind type="text/css", aber ich gehe davon aus, dass es Gründe gibt.

Wenden Sie diesen Code in Ihrem CSS an

::-webkit-scrollbar{

    -webkit-appearance: none;
    width: 7px;

}

::-webkit-scrollbar-thumb {

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

Ich habe einige Tests durchgeführt und CSS3 verwendet, um die Bildlaufleisten neu zu definieren. Sie können Ihr Overflow:scroll;oder behaltenOverflow:auto

Am Ende hatte ich so etwas ...

::-webkit-scrollbar {
    width: 15px;
    height: 15px;
    border-bottom: 1px solid #eee; 
    border-top: 1px solid #eee;
}
::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: #C3C3C3;
    border: 2px solid #eee;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2); 
} 

Der einzige Nachteil, den ich noch nicht herausfinden konnte, ist die Interaktion mit den Bildlaufleisten auf iProducts, aber Sie können mit dem Inhalt interagieren, um ihn zu scrollen

Lösung von Chris Barr hier gegeben

function isTouchDevice(){
    try{
        document.createEvent("TouchEvent");
        return true;
    }catch(e){
        return false;
    }
}

function touchScroll(id){
    if(isTouchDevice()){ //if touch events exist...
        var el=document.getElementById(id);
        var scrollStartPos=0;

        document.getElementById(id).addEventListener("touchstart", function(event) {
            scrollStartPos=this.scrollTop+event.touches[0].pageY;
            event.preventDefault();
        },false);

        document.getElementById(id).addEventListener("touchmove", function(event) {
            this.scrollTop=scrollStartPos-event.touches[0].pageY;
            event.preventDefault();
        },false);
    }
}

Funktioniert gut für mich. Entfernen Sie event.preventDefault, wenn Sie einige Klicks benötigen ...

Die iScroll4- Javascript-Bibliothek wird das Problem beheben. Es gibt eine hideScrollbarMethode, die Sie festlegen können, um falsezu verhindern, dass die Bildlaufleiste verschwindet.

Andere 2 Leute auf SO schlugen eine mögliche Nur-CSS-Lösung für das Problem vor. Die Lösung von David Thomas ist perfekt, hat jedoch die Grenze, dass die Bildlaufleiste nur während des Bildlaufs sichtbar ist.

Damit Bildlaufleisten immer sichtbar sind, können Sie die Richtlinien befolgen, die auf den folgenden Links vorgeschlagen werden:

• Wie kann ich verhindern, dass Bildlaufleisten für OS X-Trackpad-Benutzer in WebKit / Blink ausgeblendet werden?
• CSS - Überlauf: Scrollen; - Immer vertikale Bildlaufleiste anzeigen?

Stellen Sie sicher, dass Ihr Körper und Ihre Divs keine haben

  position:fixed

sonst würde es nicht funktionieren

Nach meiner Erfahrung müssen Sie sicherstellen, dass das Element display:block;für die Funktion angewendet wurde -webkit-overflow-scrolling:touch;.

Funktioniert gut für mich, bitte versuchen Sie:

.scroll-container {
  max-height: 250px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

::-webkit-scrollbar {
    width: 15px;
    height: 15px;
}

::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: #C3C3C3;
    border: 2px solid #eee;
}

Verwenden Sie diesen Code, es funktioniert in ios / android APP Webview; Es löscht einige nicht tragbare CSS-Codes;

Wenn Sie versuchen, horizontales divScrollen mit Touch auf Mobilgeräten zu erreichen, funktioniert der aktualisierte CSS-Fix nicht (getestet auf mehreren Versionen von Android Chrome und iOS Safari), z.

-webkit-overflow-scrolling: touch

Ich habe eine Lösung gefunden und sie für das horizontale Scrollen vor dem CSS-Trick geändert. Ich habe es auf Android Chrome und iOS Safari getestet und die Listener-Touch-Ereignisse gibt es schon lange, daher wird es gut unterstützt: http://caniuse.com/#feat=touch .

Verwendung:

touchHorizScroll('divIDtoScroll');

Funktionen:

function touchHorizScroll(id){
    if(isTouchDevice()){ //if touch events exist...
        var el=document.getElementById(id);
        var scrollStartPos=0;

        document.getElementById(id).addEventListener("touchstart", function(event) {
            scrollStartPos=this.scrollLeft+event.touches[0].pageX;              
        },false);

        document.getElementById(id).addEventListener("touchmove", function(event) {
            this.scrollLeft=scrollStartPos-event.touches[0].pageX;              
        },false);
    }
}
function isTouchDevice(){
    try{
        document.createEvent("TouchEvent");
        return true;
    }catch(e){
        return false;
    }
}  

Modifiziert von der vertikalen Lösung (Pre-CSS-Trick):

http://chris-barr.com/2010/05/scrolling_a_overflowauto_element_on_a_touch_screen_device/