什么会阻止Chrome浏览器中的垂直滚动，只能在手机CSS网站上的三星手机上进行滚动？

Question

我从我正在开发的客户端收到报告，他无法使用Chrome在他的Samsung Galaxy S4上垂直滚动。仅限于使用Chrome的其他三星手机。同一设备上的其他浏览器可以正常滚动。是我的CSS和HTML的唯一要素，我认为可能会造成这个如下：

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

我不使用我已被告知与移动观看问题的任何 overflow: auto;标签

。

我已在包括在我的头，这些元标签，以防止横向滚动，并得到适当的比例为移动：

<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" /> 

我的工作，该网站是http://elementorangeband.com/home如果有人关心，试图复制这一问题。

在此先感谢。

Answer 1

我能够通过进入developer tools and toggling on the mobile emulator在Chrome中重现此问题，这表明这是页面中的CSS或JS有问题。在查看媒体查询后，您看起来像隐藏了宽度为< 480px的设备的溢出。

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

到：

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

这种变化固定滚动我。让我们知道它是否仍然是一个问题。我希望开发工具能在未来的雅测试中派上用场！