overflow-x不工作但滚动整个页面

Question

我试图获得div＆＃34; .slide＆＃34;仅水平滚动，但似乎整个身体都在滚动，我不知道为什么。

如果您将页面缩小到移动设备，并水平滚动，您可以看到我的意思，

div.slide上的

，我正在使用

float: left;
width: 620px;
overflow-x: scroll;
background: #ecf2f6;

你可以看到它here！

Answer 1

您需要将.slide嵌套在另一个元素中，并为该元素提供overflow-x:scroll

这样的事情：

<div class="slide-wrap">
    <div class="slide">
        ....
    </div>
</div>

.slide-wrap {
    width: 100%;
    overflow-x: scroll;
}

我把这个概念的快速演示放在了一起。 jsFiddle现在没有加载，所以演示在CodePen：

http://codepen.io/anon/pen/bpGdo

Answer 2

防止水平滚动overflow-x: hidden;

Answer 3

对于垂直滚动：您必须为div“.slide”指定一个高度，它应该小于内容本身的高度。

对于水平滚动： div“.slide”的宽度应小于内容的宽度。

例如：

.slide {
    height: 400px; 
    overflow-y: scroll;
}

Answer 4

您需要为div.slide或其父容器指定高度，以便将overflow-y属性设置为滚动。

试试这个：

.slide {
 background: none repeat scroll 0 0 #ECF2F6;
 float: left;
 height: 300px;
 overflow-x: hidden;
 overflow-y: scroll;
 width: 620px;
}

这里我设置了高度，div.slide只能垂直滚动。 至于当大小缩小到移动时触发的水平滚动条 - 这是因为您的内容超出了页面的宽度（2个div与类app-ad）。

Answer 5

为了获得overflow-x滚动，你的父元素宽度应该小于子div。

HTML：

<div class='container'>
 <div class='slide'>Code goes here</div>
    Code goes here
</div>

CSS：

.container{width:100%;}
.slide{width:200%;overflow-x:visible;}