Scrolling content within an overflow:hidden div
Solution 1
Here is a solution using the ScrollTo() jQuery plugin.
jsFiddle example... and another example using overflow:hidden
, (scrollbar 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
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;
}
Solution 2
you can achieve this easily using .animate
function!!
You can change the top of the child 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!!
Comments
-
George almost 2 years
I have 5
.kids
in my#parent
and 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?My 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.
-
George over 10 yearsI only want one to be view able at a time.
-
Josh Crozier over 10 years@George Want me to write a JS solution?
-
George over 10 yearsI guess and maybe I can pick up on something from it, thanks Josh.
-
Josh Crozier over 10 years@George Alright, wrote some JS. See the solution above.. also retagged your question to include JS/jQuery.