javascript 在溢出中滚动内容：隐藏的 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19943842/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Scrolling content within an overflow:hidden div
提问by George
I have 5 .kidsin my #parentand I want to be able to scroll in between those but only show one at a time. How do I scroll to a different place within my parent div to see a different kid?
我有 5 个.kids，我#parent希望能够在它们之间滚动，但一次只显示一个。如何滚动到父 div 中的不同位置以查看不同的孩子？
My CSS:
我的 CSS：
#parent {
width:500px;
height:600px;
overflow: hidden;
}
.kids {
display: inline-block;
width:500px;
height:600px;
}
Sorry for the somewhat LQ question but I'm just stumped.
抱歉有点 LQ 问题，但我很难过。
采纳答案by Josh Crozier
Here is a solution using the ScrollTo() jQuery plugin.
这是使用ScrollTo() jQuery 插件的解决方案。
jsFiddle example... and another exampleusing overflow:hidden, (scrollbar hidden).
jsFiddle 示例...以及另一个使用,(scrollbar hidden) 的示例。overflow:hidden
(click the parent element to scroll in the example...)
（单击父元素在示例中滚动...）
Obviously something similar could have been created without the plugin, but if you wanted the actual scroll feature, I thought it would be easiest just to use it.
显然，没有插件也可以创建类似的东西，但是如果您想要实际的滚动功能，我认为使用它会最简单。
jQuery
jQuery
var clicks = 300;
$('#parent').click(function(){
$('#parent').scrollTo(clicks);
clicks += 300;
if(clicks>1200){
clicks=0;
}
});
HTML
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
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;
}
回答by Vignesh Subramanian
you can achieve this easily using .animatefunction!!
You can change the top of the child div
您可以使用.animate功能轻松实现这一目标！！您可以更改子div的顶部
check the live demo here
在此处查看现场演示
$("#Container").live("click",function(){
if($("#Container div").position().top<-300)
$("#Container div").animate({"top":"+=100px"});
else{
$("#Container div").animate({"top":"-=100px"});
}
});
The if else condition is not fully done anyway you can get an idea of how to do it and you can change the conditions!!
无论如何，if else 条件还没有完全完成，您可以了解如何去做，并且可以更改条件！！
回答by Maloke
Remove the display: inline-block;from kids' class and it should work and set the overflow to overflow: scroll;
display: inline-block;从孩子们的班级中删除它应该可以工作并将溢出设置为overflow: scroll;
