Question

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

我的CSS：

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

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

对于有点LQ的问题感到抱歉，但我很难过。

Answer 1

以下是使用ScrollTo() jQuery plugin的解决方案。

jsFiddle example ...以及使用overflow:hidden， （隐藏滚动条） 的其他example。

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

显然可以在没有插件的情况下创建类似的东西，但如果你想要实际的滚动功能，我认为最简单的就是使用它。

<强>的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;
}

Answer 2

您可以使用.animate功能轻松实现这一目标！您可以更改子div的顶部

查看实时演示here

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

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

if else条件还没有完全完成，你可以知道怎么做，你可以改变条件!!

Answer 3

从小孩中删除display: inline-block;＆＃39;类，它应该工作并将溢出设置为overflow: scroll;

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

我的CSS：

3 个答案: