在溢出内滚动内容:隐藏div

Question

我有5个.kids,我#parent希望能够在这些之间滚动,但一次只显示一个.如何滚动到父div中的其他位置以查看其他孩子？

我的CSS:

#parent { 
    width:500px; 
    height:600px; 
    overflow: hidden; 
}

.kids {     
    display: inline-block; 
    width:500px; 
    height:600px;    
}

对不起有点LQ问题,但我只是难倒.

Answer 1

这是使用ScrollTo（）jQuery插件的解决方案。

例如的jsfiddle ...和另一个例子使用overflow:hidden，（滚动条隐藏）。

（单击父元素以在示例中滚动...）

显然，如果没有该插件，可能会创建类似的东西，但是如果您想要实际的滚动功能，我认为仅使用它便是最简单的。

jQuery的

var clicks = 300;
$('#parent').click(function(){
    $('#parent').scrollTo(clicks);
    clicks += 300;
    if(clicks>1200){
        clicks=0;
    }
});

的HTML

<div id="parent">
    <div class="child" id="c1">1</div>
    <div class="child" id="c2">2</div>
    <div class="child" id="c3">3</div>
    <div class="child" id="c4">4</div>
    <div class="child" id="c5">5</div>
</div>

的CSS

#parent { 
    width:200px; 
    height:300px; 
    overflow-x:hidden;
    overflow-y:auto;
    background:yellow;
}
#parent:hover {
    cursor:pointer;
}

.child {     
    width:200px; 
    height:300px;
    font-size:100px;
    text-align:center;
    line-height:300px;
    color:white;
}