基础画布外滚动条和内容显示,具有宽的主要内容
Foundation off-canvas scrollbar and content display with wide primary content
当主显示区域中的内容过宽时,我在尝试使用 Foundation 6.2.0 的画布外功能时遇到了问题。 在大多数情况下,内容会换行,但如果您显示的内容无法换行(例如表格或图像),我希望屏幕底部的水平滚动条允许我横向滚动以显示其余内容。
情况似乎并非如此,并且该内容是隐藏的。
此外,如果主面板的内容超出了屏幕,并且您使用的是从屏幕右侧滑入的偏移画布,则在滑动右侧面板打开时,此面板的内容将隐藏在主面板的叠加层中。
我已经链接了一个显示此问题的 JSFiddle,因为它呈现为我在浏览器中看到的。我无法让堆栈溢出代码运行器正常工作。 使用底部的滚动条和"右"按钮来显示这两个问题。
有谁知道如何让 Foundation 在主容器的内容比屏幕宽且无法包装时适应布局?
$(document).foundation();
<div class="off-canvas-wrapper">
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
<div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>abcd</div>
<div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">abcd</div>
<div class="off-canvas position-top" id="offCanvasTop" data-off-canvas data-position="top">top</div>
<div class="off-canvas-content" data-off-canvas-content>
<div class="wrap">
<main>
<aside>
<br/>
<br/>
<br/>
<button type="button" class="button" data-toggle="offCanvasLeft">Left</button>
<button type="button" class="button" data-toggle="offCanvasRight">Right</button>
</aside>
<article style="overflow-x:scroll;overflow-y:auto;">
<div class="row" id="primary_nav">
<p>Title</p>
</div>
<div class="row" id="secondary_nav">
<div class="large-12 columns">
<div>
<ul>
<li><a href="#/menu1" class="active">Menu1</a></li>
<li><a href="#/menu2">Menu2</a></li>
<li><a href="#/menu3">Menu3</a></li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="large-8 columns" id="container">
<table style="width:5000px;">
<tr>
<td>
This is an example of a page which shows the Foundation off-canvas behavior. Only it contains content which exceeds the horizontal with of the display. I'd expect the scroll-bar at the bottom of the pane to match the content of the middle panel so tha
scrolling would reveal the content. I'd also expect sliding the right panel out to adjust for the extended width of the center panel. This doesn't seem to be the case.
</td>
</tr>
</table>
<br/>efwpihfgwofgwofgogfow3gfow
<br/>efwpihfgwofgwofgogfow3gfow
<br/>efwpihfgwofgwofgogfow3gfow
<br/>efwpihfgwofgwofgogfow3gfow
<br/>efwpihfgwofgwofgogfow3gfow
<br/>efwpihfgwofgwofgogfow3gfow
<br/>efwpihfgwofgwofgogfow3gfow
<br/>efwpihfgwofgwofgogfow3gfow
<br/>efwpihfgwofgwofgogfow3gfow
<br/>efwpihfgwofgwofgogfow3gfow
<br/>efwpihfgwofgwofgogfow3gfow
<br/>efwpihfgwofgwofgogfow3gfow
<br/>efwpihfgwofgwofgogfow3gfow
<br/>efwpihfgwofgwofgogfow3gfow
<br/>efwpihfgwofgwofgogfow3gfow
<br/>efwpihfgwofgwofgogfow3gfow
<br/>efwpihfgwofgwofgogfow3gfow
<br/>efwpihfgwofgwofgogfow3gfow
<br/>efwpihfgwofgwofgogfow3gfow
<br/>efwpihfgwofgwofgogfow3gfow
<br/>efwpihfgwofgwofgogfow3gfow
<br/>efwpihfgwofgwofgogfow3gfow
<br/>efwpihfgwofgwofgogfow3gfow
<br/>efwpihfgwofgwofgogfow3gfow
<br/>efwpihfgwofgwofgogfow3gfow
<br/>efwpihfgwofgwofgogfow3gfow
<br/>efwpihfgwofgwofgogfow3gfow
<br/>efwpihfgwofgwofgogfow3gfow
<br/>efwpihfgwofgwofgogfow3gfow
<br/>efwpihfgwofgwofgogfow3gfow
<br/>efwpihfgwofgwofgogfow3gfow
<br/>efwpihfgwofgwofgogfow3gfow
<br/>efwpihfgwofgwofgogfow3gfow
<br/>efwpihfgwofgwofgogfow3gfow
<br/>efwpihfgwofgwofgogfow3gfow
<br/>efwpihfgwofgwofgogfow3gfow
<br/>efwpihfgwofgwofgogfow3gfow
<br/>efwpihfgwofgwofgogfow3gfow
<br/>efwpihfgwofgwofgogfow3gfow
<br/>efwpihfgwofgwofgogfow3gfow
<br/>efwpihfgwofgwofgogfow3gfow
<br/>efwpihfgwofgwofgogfow3gfow
<br/>efwpihfgwofgwofgogfow3gfow
<br/>efwpihfgwofgwofgogfow3gfow
<br/>efwpihfgwofgwofgogfow3gfow
<br/>efwpihfgwofgwofgogfow3gfow
<br/>efwpihfgwofgwofgogfow3gfow
<br/>efwpihfgwofgwofgogfow3gfow
<br/>efwpihfgwofgwofgogfow3gfow
<br/>efwpihfgwofgwofgogfow3gfow
<br/>efwpihfgwofgwofgogfow3gfow
<br/>efwpihfgwofgwofgogfow3gfow
<br/>efwpihfgwofgwofgogfow3gfow
<br/>efwpihfgwofgwofgogfow3gfow
<br/>efwpihfgwofgwofgogfow3gfow
<br/>efwpihfgwofgwofgogfow3gfow
<br/>efwpihfgwofgwofgogfow3gfow
<br/>efwpihfgwofgwofgogfow3gfow
<br/>efwpihfgwofgwofgogfow3gfow
<br/>efwpihfgwofgwofgogfow3gfow
<br/>efwpihfgwofgwofgogfow3gfow
<br/>efwpihfgwofgwofgogfow3gfow
<br/>efwpihfgwofgwofgogfow3gfow
</div>
</div>
</article>
</main>
</div>
</div>
</div>
</div>
在
css 中为类.wrap
添加overflow:auto;
,并从 html 中的 article
标记中删除style="overflow-x:scroll;overflow-y:auto;"
。我希望这有所帮助。
相关文章:
- 在firefox和chrome中的左侧显示iframe滚动条
- 基础画布外滚动条和内容显示,具有宽的主要内容
- 在顶部显示滚动条&DIV
- 如何使用angularjs在空剑道网格中显示水平滚动条
- 如何“;“修复”;显示滚动条时的容器元素高度
- jquery对话框在IE中没有显示滚动条
- 在鼠标悬停时显示滚动条 [javascript]
- 捕获显示滚动条事件
- jQuery:如何在不显示滚动条的情况下滚动正文
- 可以滚动内容,但不显示滚动条
- jQuery-jScrollPane没有't显示滚动条
- iSrcoll4-默认显示滚动条
- JS-jQuery-Tw引导-阻止用户滚动正文,但显示滚动条
- Dojo移动显示滚动条
- isscroll不显示滚动条,但允许我拖动内容
- 如何使用javascript在页面加载时显示滚动条
- 调整窗口大小时显示滚动条
- 华丽弹出窗口在灯箱前面显示滚动条
- Javascript showmodaldialog不显示滚动条
- 仅通过悬停显示滚动条