Question

我设计了一个网站。一切都在桌面上工作，但在移动设备上，它不向右或向左滚动。当我在手机上打开浏览器时，它显示网站的三分之一，不会让我滚动到右边。有什么问题，如何解决这个问题？

CSS

#container {
    background-color: #f9cbdf;
    width: 100%;
    overflow: hidden;
    background-image: url(images/webtreats_baby_pink_pattern_21.jpg);
    background-repeat: repeat;
}

body {
    margin: 0;
    font-family: Helvetica, sans-serif;
}

Answer 1

删除

overflow: hidden;

来自#container。

当使用overflow: hidden;时，会删除溢出，其余内容将不可见

overflow的默认值为visible。在这种情况下，内容不会被剪裁

如果overflow设置为auto，浏览器会决定是否剪辑。

详细了解overflow here

Answer 2

你需要使用`overflow：scroll，检查示例

.overflow{
width:200px;
  overflow:scroll;
}

<div class='overflow'>wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</div>

if you want to let the users scroll all sides and if you want only x axis use overflow-x：auto; and for y axis overflow-y：auto;`

网站不会在移动设备上向右或向左滚动

2 个答案: