Bootstrap / Jasny" offcanvas"侧边栏菜单冻结页面内容(即阻止滚动)

时间:2015-09-24 03:00:14

标签: html css twitter-bootstrap twitter-bootstrap-3 jasny-bootstrap

Fiddle.

这就是' Off Canvas Reveal'来自Jasny的演示位于here。我所做的只是扩展页面内容,以便它需要一个滚动条。

单击汉堡菜单后,页面内容将冻结/不可滚动。我该如何解决这个问题?我希望能够在菜单结束时继续滚动页面。

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;
  }
}

1 个答案:

答案 0 :(得分:3)

你只需要添加

html,
body{
  overflow-y:scroll!important;
}

默认情况下,jasney将overflow:hidden;添加到body

Jsfiddle http://jsfiddle.net/z3wfct19/1/