web-dev-qa-db-fra.com

le débordement iOS (ou position absolue) rend le défilement saccadé?

Je veux que ma page Web soit uniquement déroulable verticalement. J'ai donc mis overflow-x:hidden; à mon .page-wrapper. Mon .page-wrapper contient deux couches superposées. Lorsque vous cliquez sur un bouton, la couche supérieure glisse sur le côté (comme indiqué par position:absolute;) et rend le site Web réellement plus large que la fenêtre d'affichage à 100% - de sorte qu'il pourrait défiler horizontalement.

Pour éviter le défilement horizontal, j'ai défini overflow-x:hidden sur mon .page-wrapper.

Si je le fais, le défilement vertical de mon contenu normal est vraiment bogué et ne fonctionne pas correctement.

Des idées pour réparer celà?

METTRE À JOUR

-webkit-overflow-scrolling: touch; semble fonctionner correctement tant que javascript n'est pas modifié. Voir l'exemple suivant. Ce que je fais ici, c'est mettre à jour la hauteur du corps à la hauteur du contenu du deuxième calque - afin qu'il n'y ait plus d'espace de défilement vide une fois que le calque supérieur est glissé vers la gauche. En faisant glisser la couche supérieure vers l'arrière, je retire l'attribut style (qui définit la hauteur) du corps. Après cela, le parchemin est à nouveau saccadé.

function showInfos(show) {

    if ( show ) {
        $('#videos').addClass('slid');
        $('body').height($('#infos > .content').height());
        $('#page-wrap').addClass('no-overflow');
    } else if ( !show ) {
        $('#videos').removeClass('slid');
        $('#page-wrap').removeClass('no-overflow');
        $('body').removeAttr('style');
    }
}
iphoneioscssscroll
31
matt

Vous pouvez essayer de définir width:100% sur .page-wrapper et de le définir sur overflow:hidden et position:relative. Cela pourrait empêcher le défilement horizontal.

Mis à jour le 10/12/2012

Merci pour l'exemple de code. Cela m'a vraiment aidé à comprendre votre intention et le problème du défilement plus clair. Il semble que vous ayez besoin de -webkit-overflow-scrolling . Ajoutez -webkit-overflow-scrolling: touch; à page-wrapper. Voici une [page de test mise à jour] avec cette règle appliquée. Vous pouvez comparer avec la page de test dans mon commentaire ci-dessous pour voir la différence.

32
Tim McElwee

Essayez de l'appliquer à chaque élément:

* {
  -webkit-overflow-scrolling: touch;
}
53
Ahmad Mushtaq

Cela a fait le travail pour moi afin que ce ne soit un problème sur aucune page:

html {
  -webkit-overflow-scrolling: touch;
}
0
chdonncha