Question

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

目前正在使用以下浏览器：

铬
火狐
Internet Explorer
Android Chrome
Safari iOS

但不适用于Safari for OS X ：
它将菜单视为溢出为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

当我尝试在自己的项目中解决同一类型的问题时，我从Google搜索中发现了这个问题，但是此处的解决方案尚未解决滚动条消失的问题，但是this site中的解决方案为我解决了

因此要使其适应div，您要显示具有auto行为的滚动条：

: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（使用内联块，但其他功能也起作用）时，它起作用。

Answer 5

问题是特定于IOS的，我们可以定位Safari ios，并添加诸如overflow: scroll;之类的css属性来解决此问题。

 @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- 确保添加：overflow-y: scroll;而不是溢出-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

溢出：自动在Safari OSX中无法正常工作

7 个答案: