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

Question

L'élaboration d'un iPad site, j'ai essayé d'utiliser la propriété CSS overflow: auto pour obtenir les barres de défilement si nécessaire, dans un div, mais mon appareil refuse de les montrer, même si les deux doigts de défilement est de travail.

J'ai essayé avec

overflow: auto;

et

overflow: scroll;

et le résultat est le même.

Je suis seulement de tester sur un iPad (sur les navigateurs de bureau fonctionne parfaitement).

Des idées?

Answer 1

Modifier suivant le commentaire gauche, de bien vouloir, par kritzikratzi:

[Départ] avec ios 5 d'une nouvelle propriété, -webkit-overflow-scrolling: touch peut être ajouté ce qui devrait se traduire dans le comportement attendu.

Quelques-uns, mais très peu, de plus amples informations:

• Natif de défilement dynamique dans iOS 5

---

Réponse originale à cette question, laissé pour la postérité.

Malheureusement, ni overflow: autoou scroll, produit des barres de défilement sur les appareils iOS, apparemment en raison de l'écran de largeur qui serait repris tels mécanismes utiles.

Au lieu de cela, comme vous l'avez constaté, les utilisateurs sont tenus d'effectuer le balayage à deux doigts pour faire défiler l' overflow-ed contenu. La seule référence, puisque je suis incapable de trouver le manuel pour le téléphone lui-même, que j'ai pu trouver est ici: tuaw.com: iPhone 101: à Deux doigts de défilement.

La seule solution que je peux penser est que si vous pourrait éventuellement utiliser un peu de JavaScript, et peut-être jQTouch, pour créer vos propres barres de défilement pour overflow - éléments. Vous pouvez également utiliser les @media queries pour supprimer l' overflow et afficher le contenu dans son intégralité, comme un utilisateur d'iPhone cette obtient mon vote, si ce n'est que de la pure simplicité. Par exemple:

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

Le code précédent provient d' Une Liste à Part, à partir du même article lié ci-dessus (je ne sais pas pourquoi ils ont laissé de l' type="text/css", mais je suppose que il y a des raisons.

Answer 2

J'ai fait quelques tests et à l'aide de CSS3 pour redéfinir les barres de défilement fonctionne et vous arrivez à garder votre Overflow:scroll; ou Overflow:auto

Je me suis retrouvé 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 été en mesure de savoir comment interagir avec les barres de défilement sur iProducts mais vous pouvez interagir avec le contenu de la faire défiler

Answer 3

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 très bien pour moi. Supprimer un événement.preventDefault si vous avez besoin d'utiliser quelques clics...

Answer 4

Le iScroll4 bibliothèque javascript permettra de le corriger. Il a un hideScrollbar méthode que vous pouvez définir à l' false pour empêcher la barre de défilement de disparaître.

Answer 5

2 autres peuples sur DONC proposé possible CSS seule solution au problème. David Thomas solution est parfait mais a la limite de la barre de défilement n'est visible que pendant le défilement.

Afin d'avoir des barres de défilement toujours visible, il est possible de followin lignes directrices suggérées sur les liens suivants:

• Comment puis-je empêcher les barres de défilement d'être caché pour OS X trackpad utilisateurs dans WebKit/Blink?
• Les feuilles de style CSS Overflow: Scroll; - Toujours afficher la barre de défilement verticale?