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

Question

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

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

• 铬
• 火狐
• Internet Explorer
• Android Chrome
• Safari iOS

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

这里是 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;
}

Answer 1

overflow: auto; 和 overflow: scroll; 在 iOS 和 OS X 上的工作方式似乎不同。尝试在 iOS 和 OS X 上使用overflow: scroll; 加上-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/

Answer 2

用途：

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

Answer 3

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

因此，将其调整为您希望以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);
}

Answer 4

在我的例子中，当我为元素的子元素设置 display（使用 inline-block，但其他也可以）属性时，它起作用了。

Answer 5

问题是 IOS 特定的，我们可以针对 safari ios 并添加 css 属性，例如 overflow: scroll; 来解决问题。

 @supports (-webkit-touch-callout: none) {
           .classname{
                       white-space:nowrap;
                       overflow: scroll;
                       -webkit-overflow-scrolling: touch;  
                     }
                     }

Answer 6

我添加时这个问题没有解决：

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

在 Safari 中解决，并在 div 中添加滚动：

1-确保添加：溢出-y：滚动；而不是溢出-y：自动； 因为它似乎在 Safari 中有所不同。

2- 然后，如果您为该 div 指定高度，请不要在该 div 内添加溢出属性，创建另一个嵌套 div，为嵌套 div 添加溢出繁荣，as：

html：

<div class="main"> 
  <div class=""scrollable> </div>
</div> 

css：

.main{
 height: 93vh;
}
. scrollable{
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

Answer 7

我遇到了类似的问题。我向 Safari 报告了一个错误。这是一个最小的测试用例：https://github.com/breck7/safaricolumnbug