基金会 - 关闭 Canvas 滚动问题

Question

我从 Foundation 开始，并试图让一个关闭的 canvas 示例正常工作。我一直在努力，因为菜单会像它应该的那样打开和关闭，但是如果页面内容很长并且你滚动到底部，当你打开菜单时，焦点就是你在页面上的位置。 IE，固定的工具栏和菜单打开时不固定

我已经在 fiddle 上做了一个例子，希望得到一些帮助！

JSFiddle Example

HTML

<div class="off-canvas-wrap" data-offcanvas="">
  <div class="inner-wrap">
<div class="fixed">
<nav class="tab-bar">
  <section class="left-small">
    <a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
  </section>

  <section class="middle tab-bar-section">
    <h1 class="title">Forest School - PARS Insight</h1>
  </section>
</nav>
  </div>

<aside class="left-off-canvas-menu">
  <ul class="off-canvas-list">
    <li><label>General</label></li>
    <li><a href="#">Snapshot</a></li>
    <li><a href="#">Timetable</a></li>
    <li><a href="#">Homework</a></li>
  </ul>
</aside>
 Long Body Content Here

CSS

.off-canvas-wrap, .inner-wrap {
    min-height: 100%;
}

.off-canvas-wrap{  
    height: 100%;
    overflow-y: auto;
}

Javascript

$(document).foundation();

Answer 1

这是非常受欢迎的基金会问题：

http://foundation.zurb.com/forum/posts/965-fixed-menu-using-offcanvas
http://foundation.zurb.com/forum/posts/547-off-canvas-with-fixed-top-bar
https://github.com/zurb/foundation/issues/3863
https://github.com/zurb/foundation/issues/3710

尽管官方解决方案似乎不存在，但我发现 this one (reference) 看起来可以很好地解决您的问题。

HTML

<div class="off-canvas-wrap">
   <div class="inner-wrap">
      <div class="header">
         <nav class="tab-bar" data-offcanvas>
            <section class="left-small">
               <a class="left-off-canvas-toggle menu-icon">
                  <span></span>
               </a>
            </section>
            <section class="right tab-bar-section">
               <h1>Foundation 5 test</h1>
            </section>
         </nav>
      </div>
      <aside class="left-off-canvas-menu">
         <ul class="off-canvas-list">
            <li>
               <label>Foundation</label>
            </li>
            [...]
            <li><a href="#">The Psychohistorians</a>
            [...]
            </li>
         </ul>
      </aside>
      <article class="small-12 columns">
         <p>Content</p>
         <p>Content</p>
         <div data-magellan-expedition="fixed">
            <dl class="sub-nav panel">
               <dd data-magellan-arrival="build">
                  <a href="#build">Build with HTML</a>
               </dd>
               <dd data-magellan-arrival="js">
                  <a href="#js">Arrival 2</a>
               </dd>
            </dl>
         </div>
         [...]
         <p>Content</p>
         [...]
      </article>
      <a class="exit-off-canvas"></a>
      <footer class="small-12 columns">
         <div>...</div>
      </footer>
   </div>
</div>

CSS

article {
    overflow-y: auto;
}
article,
body,
html,
.off-canvas-wrap, 
.off-canvas-wrap .inner-wrap,
.row {
    height: 100%;
    width: 100%;
}
.header {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 99;
}

Answer 2

我没有足够的声誉来评论..所以我添加作为对 Akarienta 的回答。

我在使用上述解决方案的移动浏览器上遇到了滚动问题。我为滚动工作添加了 -webkit-overflow-scrolling: touch

article,
.off-canvas-wrap, 
.off-canvas-wrap .inner-wrap
  height: 100%
  width: 100%
  -webkit-overflow-scrolling: touch
article
  overflow-y: auto

感谢this问题

基金会 - 关闭 Canvas 滚动问题

Foundation - Off Canvas Scroll Issue

html

javascript

css

zurb-foundation