Bootstrap/Jasny "offcanvas" 侧边栏菜单冻结页面内容(即防止滚动)
Bootstrap/Jasny "offcanvas" sidebar menu freezes page contents (i.e. prevents scrolling)
这实际上是位于 here 的 Jasny 的 'Off Canvas Reveal' 演示。我所做的只是扩展页面内容,以便它需要一个滚动条。
点击汉堡菜单后,页面内容变为frozen/unscrollable。如何解决此问题?我希望能够在菜单显示时继续滚动页面。
CSS:
html, body {
height: 100%;
}
.navbar-toggle {
float: left;
margin-left: 15px;
}
.navmenu {
z-index: 1;
}
.canvas {
position: relative;
left: 0;
z-index: 2;
min-height: 100%;
padding: 50px 0 0 0;
background: #fff;
}
@media (min-width: 0) {
.navbar-toggle {
display: block; /* force showing the toggle */
}
}
@media (min-width: 992px) {
body {
padding: 0;
}
.navbar {
right: auto;
background: none;
border: none;
}
.canvas {
padding: 0;
}
}
您只需添加
html,
body{
overflow-y:scroll!important;
}
默认情况下,jasney 将 overflow:hidden;
添加到 body
Jsfiddle http://jsfiddle.net/z3wfct19/1/
这实际上是位于 here 的 Jasny 的 'Off Canvas Reveal' 演示。我所做的只是扩展页面内容,以便它需要一个滚动条。
点击汉堡菜单后,页面内容变为frozen/unscrollable。如何解决此问题?我希望能够在菜单显示时继续滚动页面。
CSS:
html, body {
height: 100%;
}
.navbar-toggle {
float: left;
margin-left: 15px;
}
.navmenu {
z-index: 1;
}
.canvas {
position: relative;
left: 0;
z-index: 2;
min-height: 100%;
padding: 50px 0 0 0;
background: #fff;
}
@media (min-width: 0) {
.navbar-toggle {
display: block; /* force showing the toggle */
}
}
@media (min-width: 992px) {
body {
padding: 0;
}
.navbar {
right: auto;
background: none;
border: none;
}
.canvas {
padding: 0;
}
}
您只需添加
html,
body{
overflow-y:scroll!important;
}
默认情况下,jasney 将 overflow:hidden;
添加到 body
Jsfiddle http://jsfiddle.net/z3wfct19/1/