什么会阻止 Chrome 中的垂直滚动，仅在三星 phone 和移动 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; 标签，有人告诉我这些标签在移动设备查看时会出现问题。

我在 header 中包含了这些元标记，以防止水平滚动并获得适当的移动缩放比例：

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

此更改对我来说是固定滚动。如果问题仍然存在，请告诉我们。我希望开发工具能在您未来的测试中派上用场！

什么会阻止 Chrome 中的垂直滚动，仅在三星 phone 和移动 CSS 网站上？

What would prevent vertical scrolling in Chrome, only on a Samsung phone on a mobile CSS site?

html

css

meta

mobile

android