web-dev-qa-db-de.com

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

Entwickeln einer iPad-Website Ich habe versucht, die CSS-Eigenschaft overflow: auto zu verwenden, um die Bildlaufleisten in einer div abzurufen, aber mein Gerät weigert sich, sie anzuzeigen, auch 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 das einwandfrei). 

Irgendwelche Ideen?

cssipadios
75
mat_jack1

Edit nach dem Kommentar, freundlicherweise von kritzikratzi :

[Start] Mit ios 5beta kann eine neue Eigenschaft -webkit-overflow-scrolling: touch hinzugefügt werden, die zu dem erwarteten Verhalten führen sollte.

Einige, aber sehr wenig, weiterlesen:

 

Originalantwort, der Nachwelt überlassen.

Leider erzeugen weder overflow: auto noch scroll auf den iOS-Geräten Bildlaufleisten, offensichtlich aufgrund der Bildschirmbreite, die solche nützlichen Mechanismen in Anspruch nehmen würde.

Stattdessen müssen die Benutzer, wie Sie festgestellt haben, den Zwei-Finger-Wischvorgang ausführen, um den Inhalt des overflow- scrollen zu können. Die einzige Referenz, da ich das Handbuch für das Telefon selbst nicht finden kann, konnte ich hier finden: tuaw.com: iPhone 101: Zwei-Finger-Bildlauf .

Die einzige Problemumgehung, die ich mir dabei vorstellen kann, ist, wenn Sie möglicherweise etwas JavaScript und vielleicht jQTouch verwenden könnten, um eigene Bildlaufleisten für overflow Elemente zu erstellen. Alternativ können Sie @media queries verwenden, um overflow zu entfernen und den Inhalt vollständig anzuzeigen. Als iPhone-Benutzer erhält ich meine Stimme, wenn auch nur der Einfachheit halber. 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, der oben verlinkt ist (Ich bin nicht sicher, warum er den type="text/css" verlassen hat, aber ich gehe davon aus, dass es Gründe gibt.

110
David Thomas

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

Ich endete mit 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 von iProducts. Sie können jedoch mit dem Inhalt interagieren, um ihn zu scrollen

19
Vex_man

Wenden Sie diesen Code in Ihrer 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);
}
17
Prafull

Lösung von Chris Barr hier

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 ...

6
mikpouet

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

  position:fixed

sonst würde es nicht funktionieren

2
Matoeil

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

Damit die Bildlaufleisten immer sichtbar sind, können Sie den in den folgenden Links vorgeschlagenen Richtlinien folgen:

2
Luca Detomi

Die Bibliothek iScroll4 javascript wird das Problem beheben. Es gibt eine hideScrollbar-Methode, die Sie auf false setzen können, um zu verhindern, dass die Bildlaufleiste verschwindet.

2
Dan Gayle

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

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

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

Verwenden Sie diesen Code, um in ios/Android APP Webview zu arbeiten. Es wird nicht tragbarer CSS-Code gelöscht.

0
junfeng_feng

Funktioniert gut für mich, bitte versuchen Sie es:

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

Wenn Sie versuchen, horizontal div scrolling mit Touch auf dem Handy zu erreichen, funktioniert der aktualisierte CSS-Fix nicht (getestet unter Android Chrome und iOS Safari mit mehreren Versionen), z.

-webkit-overflow-scrolling: touch

Ich habe eine Lösung gefunden und für den horizontalen Bildlauf vor dem CSS-Trick modifiziert. Ich habe es auf Android Chrome und iOS Safari getestet, und die Hörer-Touch-Ereignisse sind schon lange her, daher bietet es gute Unterstützung: http://caniuse.com/#feat=touch .

Verwendungszweck:

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;
    }
}

Aus vertikaler Lösung geändert (Pre-CSS-Trick):

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

0
Steve Seeger