Question

68

Scrolling content within an overflow:hidden div

rated 0 times [ 69] [ 1] / answers: 1 / hits: 22013 / 11 Years ago, wed, november 13, 2013, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

shylaelisan

Add To Favorites

Follow

Total Points: 37

Total Questions: 94

Total Answers: 110

Location: Angola

Member since Tue, May 5, 2020

4 Years ago

shylaelisan questions

1 Error Argument is not assignable to parameter of type 'AxiosRequestConfig'

Sun, Jun 27, 21, 00:00, 3 Years ago

1 TypeScript - Element implicitly has an 'any' type [...] No index signature with a parameter of type 'string' was found on type

Wed, Nov 11, 20, 00:00, 4 Years ago

1 React Hooks Update Dictionary State

Mon, Jul 27, 20, 00:00, 4 Years ago

1 class array property value change using find method for all the elements in typescript

Thu, Feb 27, 20, 00:00, 4 Years ago

1 How to make disabled date and time in react datepicker?

Fri, Aug 23, 19, 00:00, 5 Years ago

View All

answered 11 Years ago juand · Accepted Answer

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;

}