我有一个 Canvas 外导航(使用 Zurb Foundation )并且我将溢出设置为 auto 因此如果菜单很长用户可以滚动。

它目前在以下浏览器上工作:

• Chrome
• 火狐
• 互联网浏览器
• Android 浏览器
• 苹果浏览器

但不适用于 OS X 的 Safari:
它将菜单视为溢出隐藏并且不滚动。

这是 HTML 菜单:

<!-- Off Canvas Menu -->
        <aside class="right-off-canvas-menu">
            <ul class="side-nav" role="navigation" title="Main Navigation" onmouseover="this.title='';">
                <li class="divider"></li>
                <li role="menuitem"><a href="#">Home</a></li>
                <li class="divider"></li>
                <li role="menuitem" class="active-parent">
                    <a href="#">Agriculture & Natural Resources</a>
                    <ul>
                        <li role="menuitem" class="active"><a href="third-level.html">Home & Garden</a></li>
                        <ul>
                            <li role="menuitem"><a href="#">Lawn & Garden Tips</a></li>
                            <li role="menuitem"><a href="fourth-level.html">Garden Q&A</a></li>
                            <li role="menuitem"><a href="#">Ponds</a></li>
                            <li role="menuitem"><a href="#">Turfgrass & Calendar</a></li>
                            <li role="menuitem"><a href="#">Weeds</a></li>
                            <li role="menuitem"><a href="#">Insects</a></li>
                            <li role="menuitem"><a href="#">Invasive Plants</a></li>
                            <li role="menuitem"><a href="#">Wildlife</a></li>
                            <li role="menuitem"><a href="#">Gold Medal Plants</a></li>
                            <li role="menuitem"><a href="#">Finding Arborists</a></li>
                            <li role="menuitem"><a href="#">Finding Landscapers</a></li>
                        </ul>
                        <li role="menuitem"><a href="#">Plant Material</a></li>
                        <li role="menuitem"><a href="#">Diagnostic Testing</a></li>
                        <li role="menuitem"><a href="#">Green Industry</a></li>
                        <li role="menuitem"><a href="#">Publications</a></li>
                        <li role="menuitem"><a href="#">Newsletters</a></li>
                    </ul>
                </li>
                <li class="divider"></li>
                <li role="menuitem"><a href="#">Family & Consumer Sciences</a></li>
                <li class="divider"></li>
                <li role="menuitem"><a href="#">4-H Youth</a></li>
                <li class="divider"></li>
                <li role="menuitem"><a href="#">Events</a></li>
                <li class="divider"></li>
                <li role="menuitem"><a href="#">Contact Us</a></li>
                <li class="divider"></li>
            </ul>
        </aside>

这是 sass:

// Off Canvas
// - - - - - - - - - - - - - - - - - - - - - - -

.right-off-canvas-menu {
    height: 100%;
    max-height: 100vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

最佳答案

overflow: auto; 和 overflow: scroll; 在 iOS 和 OS X 上似乎工作不同。尝试使用 overflow: scroll;在 iOS 和 OS X 上加上 -webkit-overflow-scrolling: touch;。

也许这些资源可以帮助您:

https://css-tricks.com/almanac/properties/o/overflow/

https://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/

https://benfrain.com/horizontal-scrolling-area-css-overflow-ios/

关于html - 溢出:自动在 Safari OSX 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32971425/