Javascript 在溢出中滚动内容：隐藏div

我的

#parent

中有5个

.kids

，我希望能够在它们之间滚动，但一次只能显示一个。如何滚动到父div中的不同位置以查看不同的孩子

我的CSS：

---

很抱歉，有点LQ的问题，但我只是被难住了。

这里有一个使用的解决方案

。。。另一个使用

溢出：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>

---

移除

显示：内联块

从儿童班开始，它应该可以工作，并将溢出设置为

溢出：滚动
您可以使用
轻松实现这一点。动画功能！！
您可以更改子div的顶部

查看现场演示

$（“#容器”）.live（“单击”，函数（）{
如果（$（“#集装箱部门”）。位置（）.top如果您希望一次只显示一个，您将需要JS。我稍后会这样做，但现在我只想知道如何一次显示一个，然后使用CSS转到下一个。我一次只希望有一个可以查看。@George希望我写一个JS解决方案？我想，也许我可以从中学习一些东西，那就是nks Josh@George好的，写了一些JS。参见上面的解决方案。还重新标记了您的问题以包括JS/jQuery。
<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>

#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;
}

$("#Container").live("click",function(){

       if($("#Container div").position().top<-300)
    $("#Container div").animate({"top":"+=100px"});
    else{
        $("#Container div").animate({"top":"-=100px"});
    }
});