边栏菜单溢出问题导致不可滚动的滚动条

Question

我正在构建一个侧边栏菜单，该菜单使用了一个受http://tympanus.net/Development/SidebarTransitions/启发的精美推送方法但是...有一些不太理想的东西我想删除但是很难找到问题的原因。我可以隐藏溢出使用隐藏，但有时人们需要滚动，我想这是一个相当容易的解决方案，希望社区成员可以提供帮助。问题在上面链接的DEMO页面中复制。

以下是该问题的屏幕截图：

这是我的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＆gt; https://jsfiddle.net/bybe/kjyotc58/

全屏JSFiddle＆gt; https://jsfiddle.net/bybe/kjyotc58/embedded/result/

Answer 1

尝试替换这些字符串：

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

这些：

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

应该这样做。

Answer 2

尝试为 st-content-inner 创建滚动条

隐藏溢出

.st-content-inner{
    overflow:hidden;
}

或者对于webkit浏览器使用

.middle::-webkit-scrollbar {
    display: none;
}