溢出x不工作，但滚动整个页面

Question

我试图让div“.slide”滚动水平只，但它似乎是整个身体滚动，我不知道为什么。

如果缩放页面向下移动，并且水平滚动，你可以明白我的意思，在div.slide

，我使用

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

你可以看到它here！

Answer 1

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

Answer 2

您需要嵌套​​另一个元素中，并给该元素的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 3

垂直滚动：你必须指定格“.slide”的高度，它应该是小于内容本身的高度。

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

例如：

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

Answer 4

你需要一个高度分配给div.slide或它的父容器，以便设置溢出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）。

Answer 5

为了获得overflow-x scroll，你的父元素宽度应该小于子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;}