Position fixed and overflow-y:scroll issue

Question

I have read this question & answer: CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue as well as a bunch of other conflicting use cases. I've tried applying different overflow types to different parents also. Nothing seems to get my use case working.

My Case

I have a full height fixed menu that will contain lots of links so if a browser isn't high enough to show them all I'd like to allow the user to scroll within the fixed div. Not a bold request.

How do I work around this issue, here's an example of the setup i'm using: http://jsfiddle.net/mz9abf43/9/

UPDATE

This is the updated fiddle with my full code for context, this is exactly how I want my menu to look but I just want to allow vertical scrolling if the screen height is smaller than the length of the menu. http://jsfiddle.net/mz9abf43/24/

Expected Output

The lines between each link should overflow to the right of the blue menu (like the image below) AND also allow the user to scroll within the blue menu. Currently I can only do one or the other.

My structure is:

<div id="fixed">
    <nav>
       <ul class="menu">
         <div class="drop">
             <li>Link here</li>
             <li>Link here
                 <ul>
                    <div class="drop">
                        <li>Link here</li>
                        <li>Link here</li>
                    </div>
                 </ul>
             </li>
             <li>Link here</li>
         </div>
       </ul>
    <nav>
</div>

My CSS is

#fixed {
        width:280px;
        position: fixed;
        top: 0;
        left: 0;
        bottom:0;
        z-index: 1000;
        background: #fff;
}

.menu   {
        padding: 0;
        margin: 0;
        position: fixed;
        z-index: 9998;
        top:0;
        bottom:0;
        left:0;
        background: white;
        width: 280px;

        /* THIS IS NOT WORKING - HOW CAN I GET THIS WORKING? */
        overflow-y: scroll;
        overflow-x: visible;

}

.menu .drop {
            background: #fff;
            height: 100%;
            z-index: 0;
}

@G.L.P The lines between each link should overflow to the right of the blue menu whilst also allowing the user to scroll the blue menu. Currently I can only do one or the other. See updated question. — egr103, Oct 01 '15 at 08:27
You may not be aware but in Safari 9 (latest version on os x) when you scroll at all in your jsfiddle, everything flickers black and white! You may want to look into that as well. — www139, Oct 08 '15 at 23:42
@www139 Its a WP generated UL list & I only have control over wrapping things around the sub menu UL's (.drop divs). If you can stick to that then by all means change what you need to in order to get it worked. The flickering on scroll, I just need to apply a BG white to the .menu li's & that will fix it. — egr103, Oct 09 '15 at 09:14
I don't think that You could achieve that without javascript. That would break HTML spec. — Bogdan Kuštan, Oct 12 '15 at 16:57
@BogdanKuštan I'm happy to use JS if it means the problem gets solved. Do you have a solution in mind? — egr103, Oct 13 '15 at 09:34
"scroll within the fixed div. Not a bold request.". Sorry, but yes, it's a bold request. Position:fixed can't be scrolled as when you set it with top:0 You are positioning the element to be always at the top of the window (not the container) and I'm afraid that's exactly what you will see, your ul always at the top of the window. Why don't you use position absolute if you need that scroll? — Alvaro Menéndez, Oct 13 '15 at 10:13
@AlvaroMenéndez I can't use absolute positioning as it needs to be fixed on screen at all times. — egr103, Oct 13 '15 at 11:14
you can make an absolute positioned element to be fixed on screen at all times if rrelative to the `body`(unless scroll... which is what you need). But up to you. gl with your project — Alvaro Menéndez, Oct 13 '15 at 11:48
@AlvaroMenéndez Well i'd be open to your solution as long as it was fixed on screen even when you scroll. — egr103, Oct 13 '15 at 13:02
Well, as a fast aproach just change fixed for absolute and remove the "bottom:0". that's a starting point. from there just check what you need / miss/ etc: http://jsfiddle.net/alvaromenendez/mz9abf43/28/ — Alvaro Menéndez, Oct 13 '15 at 13:16
@AlvaroMenéndez OK so how would I make the div full height if the page content is longer than the menu, see: http://jsfiddle.net/mz9abf43/30/ — egr103, Oct 13 '15 at 15:03
Easy with a very simple jquery. I wrapped all your `
`into a div called "content", calculate on load the height of this container and add this height to your menú: http://jsfiddle.net/alvaromenendez/mz9abf43/32/ If You want I can "move"! these comments to an answer so I could edit it here and there as long as I can help you. — Alvaro Menéndez, Oct 13 '15 at 15:14
@AlvaroMenéndez Combined with some media queries this has done the trick. If you want to put it in an answer I will accept. — egr103, Oct 13 '15 at 15:53

Alvaro Menéndez · Accepted Answer · 2015-10-14T20:39:44.383

Position:fixed can't be scrolled. When you set it with top:0 You are positioning the element to be always at the top of the window (not the container) and I'm afraid that's exactly what you will see, your ul always at the top of the window.

Probably better to use an absolute positioned if your menú may get many elements so you will get scroll bar on the body.

so as a starting point is You just need to chnage fixed for absolute and delete the bottom:0property:

.menu   {
        padding: 0;
        margin: 0;
        position: absolute;
        z-index: 9998;
        top:0;
        left:0;
        background: white;
        width: 280px;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;                
    }

as in this FIDDLE

You now just need be sure the height of this menu is as "tall" as your content so it will fill all your window height. You can use a basic jquery:

var menuHeight = $('.content').outerHeight(true );
$('.menu').css({
    'height': menuHeight + 'px'
});

where you calculate the height of your "content" container and add it as a css property to your menu:

JSFIDDLE2

Note: I made this answer from my comments on the question. If you find any other problem feel free to comment here and I'll try my best to help (if I know how).

Combined with CSS min-height media queries I managed to achieve what I wanted. Thus I applied position absolute to .menu for screen height less than 800px and for screens larger than this I applied position:fixed. — egr103, Oct 13 '15 at 16:05

Mukul Kant · Answer 2 · 2015-10-01T10:39:19.150

1

You should use box-sizing:border-box in .menu li a and make width: 70%; in .menu .drop.

.menu li a {
    color: #aaa;
    text-transform: uppercase;
    font-size:12px;
    padding: 8px 35px;
    display: inline-block;
    width: 100%;
    border-bottom: 2px solid #f0f0f0;
    box-sizing:border-box;
}

UPDATE Fiddle

edited Oct 01 '15 at 10:39

answered Oct 01 '15 at 08:35

Mukul Kant

7,074
5
38
53

Forgive me if I have misunderstood this but this doesn't achieve the expected output as illustrated in my question? – egr103 Oct 01 '15 at 08:49
Ohh no I am sorry @egr103 actually I was not getting properly, please check update fiddle, I hope it will helps you. – Mukul Kant Oct 01 '15 at 09:15
So what are the code changes you've made to get that jsFiddle working? Could you update the answer? – egr103 Oct 01 '15 at 10:14
I'm afraid this hasn't worked. I don't quite understand how the width 70% would show the menus to the right? – egr103 Oct 06 '15 at 09:01

user1903471 · Answer 3 · 2015-10-09T12:28:19.933

0

If i misunderstood Please coorect me.

Try to add Following css

.menu li a {
color: #aaa;
text-transform: uppercase;
font-size: 12px;
padding: 8px 35px;
display: inline-block;
width: 100%;
border-bottom: 2px solid #f0f0f0;
position: relative;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

}

Also You need to remove height:100% of .menu .drop class for show blue background.

May be it's help

edited Oct 09 '15 at 12:28

answered Oct 09 '15 at 12:00

user1903471

1
2

Unfortunately no this hasn't worked, please see the section titled 'Expected Output' within my question. Unfortunately like the other answer by @Maddy this cuts off the arrow to the right. See updated question – egr103 Oct 09 '15 at 12:57

score -1 · Answer 4 · answered Oct 09 '15 at 14:46

Hope this is what you looking :)

<a style="float:right" href="http://www.asmhijas.com/">Visit me</a>


<div id="container1">
    <div id="container2">          
        <ul class="menu">
    <div class="drop">
        <li ><a href="#">Home</a></li>
        <li class="menu-item-has-children highlight"><a href="#" class="">HOVER ME!!</a>    
            <div class="drop">
                <ul class="sub-menu">
                    <li class="menu-item-has-children highlight"><a href="#" class="">2nd Level Page</a>
                        <div class="drop">
                            <ul class="sub-menu">       
                                <li class="highlight"><a href="#">3rd Level Page</a></li>
                                <li class="highlight"><a href="#">Another 3rd Level Page</a></li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
        </li>
        <li class="highlight"><a href="http://www.asmhijas.com/">Visit me</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
    </div>
</ul>


    </div>
</div>

style here

.menu   {
        padding: 0;
        margin: 0;    
        z-index: 9998;
        top:0;
        bottom:0;
        left:0;
        background: white;

            -webkit-backface-visibility: hidden;
          backface-visibility: hidden;

    }

    .menu li.highlight {
        -webkit-transition: all .1s cubic-bezier(.77,0,.175,1) .1s;
        -moz-transition: all .1s cubic-bezier(.77,0,.175,1) .1s;
        -ms-transition: all .1s cubic-bezier(.77,0,.175,1) .1s;
        transition: all .1s cubic-bezier(.77,0,.175,1) .1s;
            -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
    }

    .menu li.highlight:hover {
        -webkit-transition: all .3s cubic-bezier(.77,0,.175,1) .7s;
        -moz-transition: all .3s cubic-bezier(.77,0,.175,1) .7s;
        -ms-transition: all .3s cubic-bezier(.77,0,.175,1) .7s;
        transition: all .3s cubic-bezier(.77,0,.175,1) .7s;
        background: pink;
            -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
    }

    .menu li > .drop li > .drop li.current-menu-item a,
    .menu li > .drop li.current-menu-item a,
    .contact.open a { color: #fff ; }

    .menu li {
        height: auto;
        width: 100%;
        list-style: none;
         border-bottom: 2px solid #f0f0f0;
         -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
        background: #fff;
        -webkit-user-select: none;
-webkit-touch-callout: none;
    }

    .menu li a {
        color: #aaa;
        text-transform: uppercase;
        font-size:12px;
        padding: 0 35px;
        display: inline-block;
        width: 100%;
         line-height: 1.4em;
         height:58px;
         -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
    }

        /* Sweep To Right */
        .menu li a {
          display: inline-block;
          vertical-align: middle;
          -webkit-transform: translateZ(0);
          transform: translateZ(0);
          box-shadow: 0 0 1px rgba(0, 0, 0, 0);
          -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
          -moz-osx-font-smoothing: grayscale;
          position: relative;
          -webkit-transition-property: color;
          transition-property: color;
          -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
        }

        .menu li a:before,
        .menu li.current-menu-item > .drop a:before,
        .menu li.current-menu-item.out a:before {
          content: "";
          position: absolute;
          z-index: -1;
          top: -2px;
          left: 0;
          right: 0;
          bottom: -2px;
          height: auto;
            background:pink;
          -webkit-transform: scaleX(.01);
          transform: scaleX(.01);
          -webkit-transform-origin: 0 50%;
          transform-origin: 0 50%;

            -webkit-transition: all .45s cubic-bezier(.77,0,.175,1);
        -moz-transition: all .45s cubic-bezier(.77,0,.175,1);
        -ms-transition: all .45s cubic-bezier(.77,0,.175,1);
        transition: all .45s cubic-bezier(.77,0,.175,1);
        }

        .menu li a:hover,
        .menu li a:focus,
        .menu li a:active,
        .menu li.current-menu-item a,
        .menu li.current-menu-item.out a:hover {  color: white; }

        .menu li.current-menu-item.out a { color: #aaa;}

        .menu li a:hover:before,
        .menu li a:focus:before,
        .menu li a:active:before,
        .highlight:hover > a:before,
        .menu li .drop li.highlight:hover > a:before,
        .menu li.current-menu-item a:before,
        .menu li.current-menu-item > .drop a:hover:before,
        .menu li.contact.open a:before,
        .menu li.current-menu-item.out a:hover:before {
          -webkit-transform: scaleX(1);
          transform: scaleX(1);
        }
        /* end sweep-to-right transitions */

        .menu .drop {
            background: #fff;
            height: 100%;
            z-index: 0;
            -webkit-box-shadow: 10px 0px 43px 0px rgba(0,0,0,0.15);
            -moz-box-shadow: 10px 0px 43px 0px rgba(0,0,0,0.15);
            box-shadow: 10px 0px 43px 0px rgba(0,0,0,0.15);
        }
        .menu .drop li > .drop {    z-index: -1;    }

        .menu li > .drop {
            width:280px;
            margin: 0;
            padding: 0;
            position:fixed;
            left:-280px;
            top:0;
            bottom:0;
            height: 100%;
            display: block;

                -webkit-transition: all .45s cubic-bezier(.77,0,.175,1);
            -moz-transition: all .45s cubic-bezier(.77,0,.175,1);
            -ms-transition: all .45s cubic-bezier(.77,0,.175,1);
            transition: all .45s cubic-bezier(.77,0,.175,1);
        }

        .menu li:hover > .drop,
        .menu li.hover_effect > .drop { left:280px; }
        .menu li ul li:hover > .drop,
        .menu li ul li.hover_effect > .drop { left:560px; }

        .menu .drop li .drop > ul {height: 100%; background-color: #fff;        }

        .menu .drop li ul li > .drop ul {
            -webkit-box-shadow: inset 10px 0px 43px 0px rgba(0,0,0,0.15);
            -moz-box-shadow: inset 10px 0px 43px 0px rgba(0,0,0,0.15);
            box-shadow: inset 10px 0px 43px 0px rgba(0,0,0,0.15); }

            .menu .drop.boom {
                left: -280px !important;
                -webkit-transition-duration: .5s;
                transition-duration: .5s;
            }

            .menu li ul li > .drop.boom {
                -webkit-transition-delay: 0s;
            transition-delay: 0s;
            -webkit-transition-duration: .25s;
            transition-duration: .25s; }

        .menu li a.logo,
        .mobile-menu a.logo {
            text-align: center;
            font-family: 'Varela Round', Helvetica, Arial, sans-serif;
            font-weight: 400;
            font-size: 20px;
            height: auto;
            padding: 40px 0;
            text-transform: none;
            display: block;
            -webkit-transition: all .45s cubic-bezier(.77,0,.175,1);
            -moz-transition: all .45s cubic-bezier(.77,0,.175,1);
            -ms-transition: all .45s cubic-bezier(.77,0,.175,1);
             transition: all .45s cubic-bezier(.77,0,.175,1);
        }

        .menu li a.logo > *,
        .mobile-menu a.logo > * { display: block; }
        .menu li a.logo span.monmouthshire,
        .mobile-menu a.logo span.monmouthshire { color: #222; }

        .menu li a.logo i,
        .mobile-menu a.logo i {
            -webkit-transition: all 0.3s ease;
                -moz-transition: all 0.3s ease;
                      transition: all 0.3s ease;
             font-size: 120px; line-height: .55em; position: relative; top:0; }

        .menu li a.logo:hover i,
        .mobile-menu a.logo:hover i { top: -5px; color: #38bf38}
        .menu li a.logo:hover,
        .mobile-menu a.logo:hover { color: #38bf38}

        .mobile-menu a.logo { font-size: 80% }
        .mobile-menu a.logo i { font-size: 40px }

        /* Arrow Right */
        .menu li a {    position: relative; }

        .menu li a:after,
        .menu li > .drop li a:after,
        .menu li > .drop li > .drop li a:after,
        .menu li.current-menu-item.out a:after {
            content: '';
        position: absolute;
        border-style: solid;
        border-width: 32px 0 32px 20px;
        border-color: transparent pink;
        display: block;
        width: 0;
        z-index: -1;
        margin-top: -32px;
        margin-right:1px;
        right: 280px;
        top: 50%;
        -webkit-transition: all .45s cubic-bezier(.77,0,.175,1);
        -moz-transition: all .45s cubic-bezier(.77,0,.175,1);
        -ms-transition: all .45s cubic-bezier(.77,0,.175,1);
        transition: all .45s cubic-bezier(.77,0,.175,1);
        }

.menu li:hover a:after,
        .menu li > .drop li:hover a:after,
        .menu li > .drop li > .drop li:hover a:after,
        .menu li.current-menu-item a:after,
        .menu li > .drop li > .drop li.current-menu-item a:after,
        .menu li > .drop li.current-menu-item a:after,
        .menu li.contact.open a:after,
        .menu li.current-menu-item.out:hover a:after {
            right:-20px;
        }

        .highlight:hover a {color: #fff;}
        .highlight:hover > .drop a {color: #aaa;}
        .highlight > .drop li:hover a {color: #fff;}
        .highlight > .drop li > .drop   li a {color: #aaa;}
        .highlight > .drop li > .drop   li:hover a,
        .menu li > .drop li > .drop li.current-menu-item {color:#fff;}

#container1{
    height: 100vh;
    width: 280px;
    overflow: hidden;

}

 #container2{
    height: 100%;
    width: 100%;
    overflow: auto;
    padding-right: 23px;


}
body{overflow:hidden}

Fiddle here

http://www.asmhijas.com/

score -3 · Answer 5 · edited Oct 01 '15 at 08:43

-3

Try to set overflow-x , overflow-y to hidden

this should it Work

edited Oct 01 '15 at 08:43

Ivin Raj

3,448
2
28
65

answered Oct 01 '15 at 08:31

Piotr Sikora

145
9

Please elaborate on why this fixes the problem, so it will be useful to future readers. Thanks! – Maximillian Laumeister Oct 02 '15 at 03:50

Position fixed and overflow-y:scroll issue

5 Answers5