Sidebar Menu Overflow Problem that causes a non-scrollable scroll bar

advertisements

I'm building a side bar menu that uses a nice push method inspired by http://tympanus.net/Development/SidebarTransitions/ however... there is something less than desirable I'd like to remove but struggling to find the cause of the problem. I could just hide the overflow using hidden but there is times people need to scroll, I imagine this is a fairly easy fix and hoping a community member can help. The problem replicates in the DEMO page linked above.

Here's a screen shot of the issue:

Here's my CSS

@media only screen and (min-width: 40.063em) {
html, body, .sbContainer, .sbPush, .sbContent-one{height:100%;}
.sbContent-one{overflow-y:scroll;background:#f3efe0;}
.sbContent-one, .sbContent-one-inner{position:relative;}
.sbContainer{position:relative;overflow:hidden;}
.sbPush{position:relative;left:0;z-index:99;height:100%;-webkit-transition:-webkit-transform 0.5s;transition:transform 0.5s;}
.sbPush::after{position:absolute;top:0;right:0;width:0;height:0;background: rgba(0,0,0,0.2);content:'';opacity:0;-webkit-transition:opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;transition:opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;}
.sbMenu-open .sbPush::after{width:100%;height:100%;opacity:1;-webkit-transition:opacity 0.5s;transition:opacity 0.5s;}
.sbMenu{position:absolute;top:0;left:0;z-index:100;visibility:hidden;width:300px;height:100%;background:#48a770;-webkit-transition:all 0.5s;transition:all 0.5s;}
.sbMenu::after{position:absolute;top:0;right:0;width:100%;height:100%;background:rgba(0,0,0,0.2);content:'';opacity:1;-webkit-transition:opacity 0.5s;transition:opacity 0.5s;}
.sbMenu-open .sbMenu::after{width:0;height:0;opacity:0;-webkit-transition:opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;transition:opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;}
.sbMenu ul{margin:0;padding:0;list-style:none;}
.sbMenu h2{margin:0;padding:1em;color:rgba(0,0,0,0.4);text-shadow:0 0 1px rgba(0,0,0,0.1);font-weight:300;font-size:2em;}
.sbMenu ul li a{display:block;padding:1em 1em 1em 1.2em;outline:none;box-shadow:inset 0 -1px rgba(0,0,0,0.2);color:#f3efe0;text-transform:uppercase;text-shadow:0 0 1px rgba(255,255,255,0.1);letter-spacing:1px;font-weight:400;-webkit-transition:background 0.3s, box-shadow 0.3s;transition:background 0.3s, box-shadow 0.3s;}
.sbMenu ul li:first-child a{box-shadow:inset 0 -1px rgba(0,0,0,0.2), inset 0 1px rgba(0,0,0,0.2);}
.sbMenu ul li a:hover{background:rgba(0,0,0,0.2);box-shadow:inset 0 -1px rgba(0,0,0,0);color:#fff;}
.sbFX.sbMenu-open .sbPush{-webkit-transform: translate3d(300px, 0, 0);transform: translate3d(300px, 0, 0);}
.sbFX.sbMenu{-webkit-transform: translate3d(-100%, 0, 0);transform: translate3d(-100%, 0, 0);}
.sbFX.sbMenu-open .sbFX.sbMenu {visibility: visible;-webkit-transition:-webkit-transform 0.5s;transition:transform 0.5s;}
.sbFX.sbMenu::after{display:none;}
.no-csstransforms3d .sbPush, .no-js .sbPush{padding-left:300px;}
}

JSFiddle > https://jsfiddle.net/bybe/kjyotc58/

Full Screen JSFiddle > https://jsfiddle.net/bybe/kjyotc58/embedded/result/


Try to replace these strings:

.sbContent-one{overflow-y:scroll;background:#f3efe0;}
.sbContainer{position:relative;overflow:hidden;}

with these ones:

.sbContent-one{background:#f3efe0;}
.sbContainer{position:relative;}

And it should be done.