移动设备在网站下方滚动答案

【问题标题】：Mobile devices scrolling below site移动设备在网站下方滚动
【发布时间】：2018-01-26 12:02:21
【问题描述】：

当我在移动设备上滚动时，我的网站在 html 标签下方滚动。我尝试了一些我发现的东西，比如隐藏overflows 并在body 上设置position relative，但没有任何效果。

代码：

html {
    overflow: hidden;
    height: 100%;
    width: 725%; }

body {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    margin: 0 0 30px;
    position: relative; }

如果您使用的是 google chrome，您还可以访问 www.winkelmand.nl，通过使用 Chrome devtools 将您的浏览器置于某种移动形式来尝试一下。

请注意，向下滚动时您可以滚出页面。

额外
我还想禁用水平滚动而不丢失页面侧面的内容。

【问题讨论】：

标签： javascript html css

【解决方案1】：

也许您的意思是最近添加到 Chrome 63 中的默认 scolliny 行为选项。 Here is an atricle

body {
  overscroll-behavior-y: contain;
}

【讨论】：

在 apple safari 上打开网站时也会发生这种情况。同样添加代码也没有解决问题。

【解决方案2】：

出于某种原因，在我的视口中添加 user-scalable=no 就可以了。我仍然可以滚动，但它不会让我滚动页面。

第一：
<meta name="viewport" content="width=device-width, initial-scale=1.0" >

现在：
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" >

我不完全知道这是如何工作的，但确实如此，仍然感谢您的回答，我不知道overscroll-behavior-y: contain;，我认为它会变得有用。

【讨论】：

【解决方案3】：

您可以使用以下禁用水平条：

html, body {
        max-width: 100%;
        overflow-x: hidden;
    }

是的，正如@Jiib 所说的overscroll-behavior

【讨论】：

我添加了这段代码，还有overscroll-behavior-y: contain;，但它似乎仍然滚动到页面外。或者这在 chrome devtools 中不可见？
你应该隐藏其他不需要的页面，你只是改变它们的位置而不是隐藏它们，这就是为什么它们总是在导致水平滚动条的 DOM 中