web-dev-qa-db-fra.com

Comment obtenir la barre de défilement avec débordement de CSS sur iOS

Développer un site Web pour iPad J'ai essayé d'utiliser la propriété CSS overflow: auto pour obtenir les barres de défilement si nécessaire dans une variable div, mais mon appareil refuse de les afficher, même si le défilement à deux doigts fonctionne.

J'ai essayé avec

overflow: auto;

et

overflow: scroll;

et le résultat est le même.

Je teste uniquement sur un iPad (sur les navigateurs de bureau fonctionne parfaitement). 

Des idées?

cssipadios
75
mat_jack1

Edit après le commentaire, aimablement, par kritzikratzi :

[Démarrage] avec ios 5beta, une nouvelle propriété -webkit-overflow-scrolling: touch peut être ajoutée, ce qui devrait entraîner le comportement attendu.

Quelques lectures supplémentaires, mais très peu:

 

Réponse originale, à gauche pour la postérité.

Malheureusement, ni overflow: auto, ni scroll ne génèrent de barres de défilement sur les appareils iOS, apparemment en raison de la largeur de l'écran utilisée, de tels mécanismes utiles.

Comme vous l'avez déjà constaté, les utilisateurs doivent effectuer un balayage à deux doigts pour faire défiler le contenu overflow-. La seule référence, puisque je ne trouve pas le manuel du téléphone, est la suivante: tuaw.com: iPhone 101: Défilement à deux doigts .

La seule solution que je puisse envisager pour cela est de pouvoir éventuellement utiliser du JavaScript, et peut-être jQTouch, pour créer vos propres barres de défilement pour les éléments overflow. Sinon, vous pouvez aussi utiliser @media queries pour supprimer la overflow et afficher le contenu dans son intégralité. En tant qu’utilisateur d’iPhone, cela me donne droit de vote, ne serait-ce que pour sa simplicité. Par exemple:

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

Le code précédent provient de A List Apart , du même article lié au précédent (je ne sais pas pourquoi ils sont partis du type="text/css", mais je suppose qu'il y a des raisons.

110
David Thomas

J'ai fait des tests et utilisé CSS3 pour redéfinir les barres de défilement et vous gardez votre Overflow:scroll; ou Overflow:auto

J'ai fini avec quelque chose comme ça ...

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

Le seul inconvénient que je n'ai pas encore compris est comment interagir avec les barres de défilement sur les produits iP, mais vous pouvez interagir avec le contenu pour le faire défiler

19
Vex_man

Appliquez ce code dans votre css

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

Solution donnée par Chris Barr ici

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

Fonctionne bien pour moi. Supprimez event.preventDefault si vous devez utiliser certains clics ...

6
mikpouet

assurez-vous que votre corps et vos divs n'ont pas 

  position:fixed

sinon ça ne marcherait pas

2
Matoeil

Deux autres personnes sur SO ont proposé une solution possible du problème uniquement aux CSS. La solution de David Thomas est parfaite mais a la limite que la barre de défilement ne soit visible que pendant le défilement.

Pour que les barres de défilement soient toujours visibles, il est possible de suivre les instructions suggérées sur les liens suivants:

2
Luca Detomi

La bibliothèque iScroll4 javascript corrigera tout cela. Il existe une méthode hideScrollbar que vous pouvez définir sur false pour empêcher la barre de défilement de disparaître.

2
Dan Gayle

D'après mon expérience, vous devez vous assurer que l'élément a display:block; appliqué pour que le -webkit-overflow-scrolling:touch; fonctionne.

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

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

Utilisez ce code, cela fonctionne dans WebView APP ios/Android; Il supprime du code CSS non portable;

0
junfeng_feng

Fonctionne bien pour moi, s'il vous plaît essayez:

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

Si vous essayez de faire défiler horizontal div avec tactile sur mobile, le correctif CSS mis à jour ne fonctionne pas (testé sur plusieurs versions d'Android Chrome et iOS Safari), par exemple:

-webkit-overflow-scrolling: touch

J'ai trouvé une solution et l'ai modifiée pour le défilement horizontal d'avant l'astuce CSS. Je l'ai testé sur Android Chrome et iOS Safari et les événements tactiles pour les auditeurs ont été enregistrés il y a longtemps. Son support est donc bon: http://caniuse.com/#feat=touch .

Utilisation:

touchHorizScroll('divIDtoScroll');

Les fonctions:

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

Modifié à partir de la solution verticale (astuce pré-CSS):

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

0
Steve Seeger