[英]Foundation - Off Canvas Scroll Issue
我从基金会开始,试图让画布上的示例工作。 我一直在努力,因为菜单打开和关闭应该如此,但是如果页面内容很长并且您向下滚动,当您打开菜单时,焦点就在您在页面上的位置。 IE,固定工具栏和菜单在打开时不固定。
我在一个小提琴上做了一个例子,并希望得到一些帮助!
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();
这是非常受欢迎的基金会问题:
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
尽管似乎官方解决方案还没有存在,但我发现这个 ( 参考 )看起来像是你的问题的一个很好的解决方案。
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;
}
我没有足够的声誉来发表评论。所以加上作为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
感谢这个问题
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.