仅使用移动视图在站点中进行水平滚动和垂直滚动

Question

当用于查看移动视图时，我希望仅在我的网站上显示垂直滚动。当我在移动端查看时，我想删除到我的网站的水平滚动。 我在移动视图中有长页面垂直滚动没有出现。

帮帮我。

Answer 1

我认为您可以使用@media 查询和overflow-x 或overflow-y 来控制滚动条，因此您可以结合使用：

CSS

body {
  overflow: hidden;
}

@media (max-width: 480px) {
  body {
    overflow-y: auto;
  }
}

调整 480 像素以满足您的特定需求。 Here is a fiddle that shows this query working 当您将浏览器的大小调整到低于 480 像素时，您可以看到滚动条又回来了。

让我知道这是否适合您。如您所见，我们将 overflow 设置为隐藏在 body 上（就像您现在一样），通过此 @media 查询，我可以在宽度为 480 像素或更低时将其恢复。