CODEWITHSUNDEEP
javascripthtmlcss
thedom
thedom

Reputation: 2518

Unable to scroll div within fixed div

I'm experiencing problems with a menu containing a parent container which spreads over the entire site and a div with the actual content. Everything is okay as long as the device screen is big enough. But especially with mobile devices its not possible to show the entire content.

I've created a jsfiddle at http://jsfiddle.net/89xyzsfz/ to show the problem with a working sample and the needed js and css. On mobile devices just some of the parts are visible but it is not possible to scroll the content.

The relevant code itself explained:

            <div class="hiddenMenu jsMenu">
                <div class="menuContainer jsMenuContainer">
                    <h3>Menu content</h3>

                    <ul>
                        <li><a href="#item1">Item1</a></li>
                        <li><a href="#item2">Item2</a></li>
                        <li><a href="#item3">Item3</a></li>
                        <li><a href="#item4">Item4</a></li>
                        <li><a href="#item5">Item5</a></li>
                        <li><a href="#item6">Item6</a></li>
                        <li><a href="#item7">Item7</a></li>
                        <li><a href="#item8">Item8</a></li>
                        <li><a href="#item9">Item9</a></li>
                    </ul>
                </div>

                <div class="menuBackground jsMenuBackground"></div>
            </div>

Upvotes: 0

Views: 2239

Answers (2)

Jako Basson
Jako Basson

Reputation: 1531

Change your css for .hiddenMenu .menuContainer to the following:

.hiddenMenu .menuContainer {
  position: relative;
  margin: 0 auto;
  text-align: center;
  z-index: 12;
  height: 100%;
  overflow: auto;
}

The .menuContainer needs to scroll the menu items and therefore requires the overflow:auto;, height:100% and needs to be positioned relative instead of absolute.

http://jsfiddle.net/89xyzsfz/5/

Hope that helps!

Upvotes: 4

Jainik Patel
Jainik Patel

Reputation: 2314

Simple Change Your Code to this CSS. The overflow is clipped, but a scroll-bar is added to see the rest of the content

.hiddenMenu {
    display: none;
    height: 100%;
    left: 0;
    position: fixed;
    top : 0;
    width: 100%;
    z-index: 10;
    overflow:scroll;
}

Overflow Values

visible: content is not clipped when it proceeds outside its box. This is the default value of the property

hidden: overflowing content will be hidden.

scroll: similar to hidden except users will be able to scroll through the hidden content

auto: if the content proceeds outside its box then that content will be hidden whilst a scroll bar should be visible for users to read the rest of the content.

initial: uses the default value which is visible

inherit: sets the overflow to the value of its parent element.

Upvotes: 0

Related Questions