什麼會阻止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; 
} 

這種變化固定滾動我。讓我們知道它是否仍然是一個問題。我希望開發工具能在未來的雅測試中派上用場！