9

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

我的 CSS:

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

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

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

4

3 回答 3

8

这是使用ScrollTo() jQuery 插件的解决方案。

jsFiddle 示例...以及另一个使用, (scrollbar hidden)的示例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;
}
于 2013-11-13T02:11:25.680 回答
1

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

在这里查看现场演示

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

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

if else 条件无论如何都没有完全完成,您可以了解如何做,您可以更改条件!

于 2013-11-13T04:18:12.057 回答
0

从孩子们的班级中删除display: inline-block;它应该可以工作并将溢出设置为overflow: scroll;

于 2013-11-13T02:12:45.280 回答