webkit-débordement-le défilement d'un problème avec l'axe des abscisses?

J'ai un div scrollable avec le code css suivant:

overflow-x:hidden;
overflow-y:auto;
-webkit-overflow-scrolling: touch;
width:200px;
height:500px;

Cependant sur les appareils iOS, lorsque le contenu à l'intérieur de la div est plus large que la div elle-même, l'axe des x, le défilement est activé. Comment puis-je désactiver les x-axe de défilement?

Cela pourrait montrer un aperçu. stackoverflow.com/questions/12845892/...

OriginalL'auteur Ninjiangstar | 2012-12-28

  1. 9

    J'ai eu le même problème et il semble qu'il n'existe pas de x/y des options pour l'-webkit-débordement-le défilement malheureusement. La solution de contournement que j'ai généralement l'utilisation est d'envelopper le défilement de la div dans un overflow-x: hidden div et le problème devrait être résolu.

    Balisage:

    <div class="scroll-container">
  <div class="scroll-wrapper">
    <div class="scroll-body">
    </div>
  </div>
</div>

    Style:

    .scroll-container {
  -webkit-overflow-scrolling: touch;
  overflow: auto;
  width: 200px;
  width: 500px;
}
.scroll-wrapper {
   width: 200px;
   overflow-x: hidden;
 }

    OriginalL'auteur Steve8708

  2. -4

    Vraiment une solution facile pour cela est juste pour s'assurer qu'aucun de vos éléments sont plus large que la fenêtre d'affichage. Cela peut se faire en plaçant un "fourre-tout" en haut de votre CSS:

    div, span, h1, h2, h3, h4, h5, p, img, ul, li, ... ETC ...
{
    max-width: 100%;
}
    c'est juste horrible et vous mordre plus tard.
    Bonne idée pour des classes spécifiques. A résolu une Ioniques problème pour moi. Je vous remercie.
    Haha, j'ai gagné beaucoup d'argent pour résoudre les problèmes qui ont été causés par ce type de code.

    OriginalL'auteur Scott Lieberman