Was würde vertikales Scrollen in Chrome verhindern, nur auf einem Samsung-Handy auf einer mobilen CSS-Site?

Question

Ich bekomme Berichte von dem Kunden, den ich entwickle, dass er nicht vertikal auf seinem Samsung Galaxy S4 mit Chrome scrollen kann. Nur auf diesem und anderen Samsung-Handys mit Chrome. Andere Browser auf demselben Gerät führen einen Bildlauf durch. Die einzigen Elemente meiner CSS und HTML, die ich glauben konnte, dies verursacht werden, sind wie folgt:

CSS:

::-webkit-scrollbar{width: 20px;} 
::-webkit-scrollbar-thumb{background-color:rgb(255, 136, 0); border-radius: 0;} 
::-webkit-scrollbar-thumb:hover{background-color:rgb(194, 103, 0);} 
::-webkit-scrollbar-track{background-color:rgb(237, 237, 237);} 

ich keine overflow: auto; Tags bin mit dem ich gesagt wurde, mit mobilen Betrachtungs problematisch sind.

Ich habe die diese Meta-Tags in meinem Header enthält horizontales Scrollen zu vermeiden und richtige Skalierung für mobile erhalten:

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1" /> 
<meta name="apple-mobile-web-app-capable" content="yes" /> 

Die Seite arbeite ich an ist http://elementorangeband.com/home wenn jemand kümmert sich um dieses Problem zu versuchen und zu replizieren.

Vielen Dank im Voraus.

Answer 1

Ich bin in der Lage, dies in Chrom zu reproduzieren, indem Sie in developer tools and toggling on the mobile emulator dort gehen, was anzeigt, dass dies mit dem CSS oder JS auf der Seite etwas falsch ist. Nach dem Betrachten Ihrer Medienabfragen sieht es so aus, als würden Sie den Überlauf für Geräte mit den Breiten < 480px ausblenden.

Ändern Sie diesen Abschnitt elementorange.css:

@media only screen and (max-device-width: 480px) { 

body { 
    width: 100%; 
    max-width: 480px; 
    font-size: 10px; 
    position: absolute; 
    margin: 0px; 
    padding: 0px; 
    background-color: #000; 
    overflow: hidden; /* remove me!! */ 
    -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
      box-sizing: border-box; 
} 

zu:

@media only screen and (max-device-width: 480px) { 

body { 
    width: 100%; 
    max-width: 480px; 
    font-size: 10px; 
    position: absolute; 
    margin: 0px; 
    padding: 0px; 
    background-color: #000; 
    -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
      box-sizing: border-box; 
} 

Diese Veränderung für mich fixiert Scrollen. Lassen Sie uns wissen, ob es noch ein Problem ist. Ich hoffe, dass die Entwicklerwerkzeuge nützlich sind, um zukünftige Tests für Sie durchzuführen!