Html 溢出：自动在 Safari OSX 中不起作用

overflow: auto not working in Safari OSX

提问by J. French

I have an off-canvas navigation (using Zurb Foundation) and I have the overflow set to autoso the user can scroll if the menu is long.

我有一个画布外导航（使用Zurb Foundation）并且我将溢出设置为auto这样用户可以在菜单很长时滚动。

It is currently working on the following browsers:

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

• Chrome
• Firefox
• Internet Explorer
• Android Chrome
• Safari iOS

• 铬合金
• 火狐
• IE浏览器
• 安卓浏览器
• Safari iOS

but not on Safari for OS X:
It treats the menu like overflow is hiddenand does not scroll.

但不是在 OS X 的 Safari 上：
它将菜单视为溢出hidden并且不滚动。

Here is the HTML menu:

这是 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>

And here is the sass:

这是 sass：

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

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

回答by Ruslan Zhomir

overflow: auto;and overflow: scroll;seem to work different on iOS and OS X. Try to use overflow: scroll;plus -webkit-overflow-scrolling: touch;on iOS and OS X.

overflow: auto;并且overflow: scroll;似乎在 iOS 和 OS X 上的工作方式不同。尝试在 iOS 和 OS X 上使用overflow: scroll;plus -webkit-overflow-scrolling: touch;。

Maybe these resources will assist you:

也许这些资源会帮助你：

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

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

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

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

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

https://benfrain.com/horizo​​ntal-scrolling-area-css-overflow-ios/

回答by Gil Snovsky

Use:

用：

white-space:nowrap;
overflow: scroll;
-webkit-overflow-scrolling: touch;

回答by Exadra37

I found this question from a Google search when trying to fix the same type of issue in my own project, but the solutions here have not solved the scroll bar disappearing, but the solution in this sitesolved it for me.

在我自己的项目中尝试修复相同类型的问题时，我从 Google 搜索中发现了这个问题，但是这里的解决方案并没有解决滚动条消失的问题，但是这个站点中的解决方案为我解决了这个问题。

So adapting it to the div you want to show the scroll bar with autobehavior:

因此，将其调整为要显示具有auto行为的滚动条的 div ：

:root {
  --scrollbar-track-color: transparent;
  --scrollbar-color: rgba(0,0,0,.2);

  --scrollbar-size: .375rem;
  --scrollbar-minlength: 1.5rem; /* Minimum length of scrollbar thumb (width of horizontal, height of vertical) */
}
.right-off-canvas-menu::-webkit-scrollbar {
  height: var(--scrollbar-size);
  width: var(--scrollbar-size);
}
.right-off-canvas-menu::-webkit-scrollbar-track {
  background-color: var(--scrollbar-track-color);
}
.right-off-canvas-menu::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-color);
  /* Add :hover, :active as needed */
}
.right-off-canvas-menu::-webkit-scrollbar-thumb:vertical {
  min-height: var(--scrollbar-minlength);
}
.right-off-canvas-menu::-webkit-scrollbar-thumb:horizontal {
  min-width: var(--scrollbar-minlength);
}