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?
#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.
Use overflow: hidden instead. Use overflow-x : scroll and overflow-y : hidden , or overflow: scroll hidden instead. Use overflow-x : hidden and overflow-y : scroll , or overflow: hidden scroll instead. Use overflow: clip instead.
To hide the horizontal scrollbar and prevent horizontal scrolling, use overflow-x: hidden: HTML.
To fit all the text inside the div, the bi-directional scrolling method will be used. You can apply it by placing the overflow:scroll and white-space:nowrap in the id lifestyle inside the style tag. Notice the scroll bar at the bottom and right side of the div .
Set the div with a width or height, (otherwise it won't know whether something is overflowing). Then, add the overflow:hidden; CSS property-value pair.
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With