[英]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.