[英]Scrolling content within an overflow:hidden div
我的.kids
中有5个.kids
,我希望能够在这些之间滚动,但一次只能显示一个#parent
。 如何滚动到父div中的其他位置以查看其他孩子?
#parent {
width:500px;
height:600px;
overflow: hidden;
}
.kids {
display: inline-block;
width:500px;
height:600px;
}
对不起有点LQ问题,但我只是难倒。
这是一个使用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;
}
你可以使用.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条件还没有完全完成,你可以知道如何做到这一点,你可以改变条件!
删除display: inline-block;
从孩子们的班级,它应该工作,并设置溢出overflow: scroll;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.