【问题标题】:Bootstrap/Jasny "offcanvas" sidebar menu freezes page contents (i.e. prevents scrolling)Bootstrap/Jasny“offcanvas”侧边栏菜单冻结页面内容(即防止滚动)
【发布时间】:2015-09-24 03:00:13
【问题描述】:

Fiddle.

这实际上是来自 here 的 Jasny 的“Off Canvas Reveal”演示。我所做的只是扩展页面内容,使其需要滚动条。

点击汉堡菜单后,页面内容冻结/不可滚动。如何解决此行为?我希望能够在菜单退出时继续滚动页面。

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 css twitter-bootstrap twitter-bootstrap-3 jasny-bootstrap


    【解决方案1】:

    你只需要添加

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

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

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

    【讨论】:

    • 好的答案,OP 应该记住的唯一一件事是,如果菜单超出 y 轴(例如很多菜单项)突然你有两个滚动条。对大多数人来说都很好并且工作得很好,但可能会让一些不明白为什么突然出现两个滚动条的人。显然,大多数人看到这将是在一个可能是触摸屏的小型设备上,所以无论如何都不会看到滚动条,但值得牢记。
    • 谢谢。我可以在菜单元素中添加overflow:hidden 使其不显示吗?
    猜你喜欢
    • 2021-05-28
    • 2017-03-06
    • 1970-01-01
    • 2015-12-22
    • 2017-10-23
    • 2016-02-20
    • 1970-01-01
    • 2014-07-03
    • 1970-01-01
    相关资源
    最近更新 更多