在overflow:hidden的div中滚动内容

Question

我有一个父元素#parent里面有5个孩子元素.kids，我想要能够在它们之间滚动，但一次只显示一个。如何在父

中滚动到不同的位置以查看另一个孩子？

我的CSS：

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

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

抱歉，这个问题有点模糊难懂，但我感到困惑。

- George

---

如果您希望一次只能看到一个，那么您需要使用JS。 - Josh Crozier

我以后会做那个，但现在我只想弄清楚如何使用CSS逐个显示一个，然后再转到下一个。 - George

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

- Josh Crozier

---

我只想让一个可见。 - George

@George，需要我写一个JS解决方案吗？ - Josh Crozier

我猜我可能可以从中学到一些东西，谢谢Josh。 - George

@George 好的，我写了一些JS代码。请参考上面的解决方案。同时，我已经重新标记了你的问题，包括JS/jQuery。 - Josh Crozier

Answer 2

使用.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条件语句还没有完全完成，但是你可以了解如何完成它，并且你可以更改条件！

- Vignesh Subramanian

Answer 3

从 kids 类中删除 display: inline-block;，然后将溢出设置为 overflow: scroll;，它应该可以工作。

- Maloke