Foundation off-canvas 滚动条和内容显示具有广泛的主要内容

Question

当主显示区域中的内容过宽时，我在尝试使用 Foundation 6.2.0 的 Off-Canvas 功能时遇到了问题。在大多数情况下，内容会换行，但如果您要显示无法换行的内容（例如 table 或图像），我希望屏幕底部的水平滚动条允许我横向滚动以显示其余内容。

好像不是这样，那个内容是隐藏的。

此外，如果主面板的内容超出屏幕，并且您使用的是从屏幕右侧滑入的偏移量-canvas，则此面板的内容将被隐藏我在滑动右侧面板打开时主面板的叠加层。

我 linked a JSFiddle showing this problem 因为它呈现的就像我在浏览器中看到的那样。我无法让 Stack Overflow 代码运行器正常工作。使用底部的滚动条和 "Right" 按钮来显示这两个问题。

有谁知道当主容器的内容比屏幕宽且无法换行时如何让 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>

Answer 1

为 css 中的 class .wrap 添加 overflow:auto; 并从 html 中的 article 标签中删除 style="overflow-x:scroll;overflow-y:auto;" .希望对您有所帮助。

Foundation off-canvas 滚动条和内容显示具有广泛的主要内容

Foundation off-canvas scrollbar and content display with wide primary content

javascript

jquery

css

zurb-foundation-6