Horizontal scrolling when parent of scroll is overflow:hidden

Question

I have an element on my page, that is a child of a fixed with container that also has overflow:hidden.

What I wanting to do has the child scroll horizontally. What ever I try though nothing seems to work, here is my code.

<div class="container service-overview">
            <h1 class="section-header">Our Services<span>Whatever your needs, we have the experts on hand.</span></h1>
            <hr class="dashed" />
            <div class="scrollArea">
                <div class="quad">
                    <h3>Personal Injury</h3>
                    <img src="<?php echo get_bloginfo('template_url'); ?>/_/img/services-thumb.jpg" />
                    <hr class="dashed"/>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
                    Duis aute irure dolor in reprehenderit in voluptate velit</p>
                    <div class="more">
                        <a href="<?php echo get_permalink(152); ?>" class="user-button">More</a>
                    </div>
                </div>
                <div class="quad">
                    <h3>Employment</h3>
                    <img src="<?php echo get_bloginfo('template_url'); ?>/_/img/services-thumb.jpg" />
                    <hr class="dashed"/>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
                    Duis aute irure dolor in reprehenderit in voluptate velit</p>
                    <div class="more">
                        <a href="<?php echo get_permalink(154); ?>" class="user-button">More</a>
                    </div>
                </div>
                <div class="quad">
                    <h3>Wills &amp; Probate</h3>
                    <img src="<?php echo get_bloginfo('template_url'); ?>/_/img/services-thumb.jpg" />
                    <hr class="dashed" />
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
                    Duis aute irure dolor in reprehenderit in voluptate velit</p>
                    <div class="more">
                        <a href="<?php echo get_permalink(158); ?>" class="user-button">More</a>
                    </div>
                </div>
                <div class="quad">
                    <h3>Company Law</h3>
                    <img src="<?php echo get_bloginfo('template_url'); ?>/_/img/services-thumb.jpg" />
                    <hr class="dashed" />
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
                    Duis aute irure dolor in reprehenderit in voluptate velit</p>
                    <div class="more">
                        <a href="<?php echo get_permalink(156); ?>" class="user-button">More</a>
                    </div>
                </div>
            </div>
        </div>

CSS

    .container, .wrapper, .condense {
width: 100%;
overflow: hidden;
}

.service-overview {
font-size: 15px;
font-size: .9375rem;
line-height: 133%;
padding: 0 0 124px;
}

service-overview .quad {
display: inline-block;
width: 50%;
position: relative;
border-bottom: 0 none;
float: left;
}

where am I going wrong?

You might need to change `overflow: hidden;` to `overflow: scroll;` if you are wanting to scroll left and right. you also have `overflow-x:` or `overflow-y:` — Andrew, Apr 23 '13 at 13:37
@Andrew I need the parent elements to be `overflow:hidden` though. — Udders, Apr 23 '13 at 13:41

score 0 · Answer 1 · answered Apr 23 '13 at 13:35

0

You could try a fixed height on the element. Whenever the amount of text doesn't fit the parameters (height wise) the element should grow scroll bars automatically. See this link. I think it may answer your question.

http://www.quackit.com/html/codes/html_scroll_box.cfm

answered Apr 23 '13 at 13:35

Justin Kratzer

1
3

Height is irrelevant - I want horizontal scrollbars not vertical – Udders Apr 23 '13 at 13:40

score 0 · Answer 2 · answered Apr 23 '13 at 13:38

If i get you right, you're trying to scroll (with your mousewheel) and you want to move the scrollable area horizontally.

Horizontal scrolling can't be done with a vertical scroll, which the mousewheel refers to. You would have to write some js to intercept the scroll (jquery scroll/) and then you need to scroll to the horizontal position according to the scroll action (jquery scrollLeft)

Here's a example i found => http://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/

score 0 · Answer 3 · edited May 23 '17 at 11:50

Let me quote here:

Answer is: You can't. Either the parent has overflow:hidden then all child-elements will be clipped, or you have overflow:other-than-hidden.

You have a couple of options here:

1)Remove the overflow:hiddenWhy do you need this in the first place?
2)Take div.scrollArea out of the container div.container service-overview and make it a sibling to the container like the following pseudocode:

<parent>    
   <original-container style="overflow:hidden">
      <elements to be clipped>
   </container>

   <scrollarea style="overflow:visible">
      <elements to be shown>
   </container>
</parent>

Other than that, I am afraid there is no way around this.

Reference: Overriding overflow: hidden

Horizontal scrolling when parent of scroll is overflow:hidden

3 Answers3