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.

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.

• javascript
• jquery
• html
• css
• scroll

• You would need JS if you want only one to be visible at a time. – Josh Crozier Commented Nov 13, 2013 at 2:03
• I'm going to be doing that later, but for now I just want to figure out how I'm going to display one at a time and then go to the next with CSS. – George Commented Nov 13, 2013 at 2:06

3 Answers 3

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

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!!

Remove the display: inline-block; from kids' class and it should work and set the overflow to overflow: scroll;