Question

好的，这是html：

<div style="height: 200px; position: relative;"  id="filterOptionsContainer">
                <table id="filterOptionsTable" class="table table-striped table-hover">
                </table>
            </div>

基本上，我是动态地向表中添加行，我希望容器滚动溢出。首先我尝试了显而易见的事实：

#filterOptionsContainer {
overflow-y: auto;
}

除了ios移动设备上的Safari之外，其他地方都可以正常工作。

从那以后，我花了好几个小时尝试了我能想到并阅读的各种风格组合，但我无法获得标准的溢出滚动。我得到的最接近的是滚动条显示（它实际上并没有滚动）。

感谢所有帮助。我很难相信在Safari中无法在模态中滚动div的内容......

编辑：仍在这个问题上。我需要解决它。

Answer 1

尝试应用此内联或通过Jquery脚本

 style="overflow-y: scroll; -webkit-overflow-scrolling: touch;"

或通过Jquery脚本

$("#filterOptionsContainer").css({
    "overflow-y": "scroll",
    "-webkit-overflow-scrolling": "touch"
});

Answer 2

我没有任何IOS产品可以验证这一点，但似乎overflow: auto是一个已知的Safari错误。

试试这个：

#filterOptionsContainer {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

Answer 3

您可以在自动溢出后设置overflow-y:hidden;，并且在Safari中至少应用该规则。 Ref.

Answer 4

使用两个嵌套div来显示垂直滚动条的代码。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="?android:attr/listPreferredItemHeight"
    android:minHeight="150dp"
    android:paddingBottom="6dp"
    android:paddingLeft="6dp"
    android:paddingRight="6dp"
    android:background="#ffffff"
    android:orientation="vertical"
    android:layout_marginBottom="5dp">

    <ImageView
        android:id="@+id/icon"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_gravity="center"
        android:focusable="false"
        android:focusableInTouchMode="false" />

    <TextView
        android:id="@+id/description"
        android:textSize="18sp"
        android:textColor="#898A8A"
        android:singleLine="false"
        android:textAlignment="center"
        android:textStyle="italic"
        android:background="#ffffff"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_gravity="center" />

</LinearLayout>

Answer 5

你可以尝试一下，它对我来说很好用

#filterOptionsContainer {
    overflow: auto; 
    overflow-y: auto; 
    overflow-x: hidden; 
}

Answer 6

检查您的Safari浏览器版本。并符合以下标准：

在Safari 3.0及更高版本中可用。
适用于iOS 1.0及更高版本。

如果您反对这些条件，那么请采取以下措施：

应用ClearFix

.clearfix:after {visibility: hidden;}

原因：设置溢出并不清除元素处的浮动

或

设置元素相对于根/体水平的位置，如下所示：

body { position:relative; overflow-x:hidden; }

注意：只应用其中一个。

谢谢＆amp;欢呼声

Answer 7

You can try this it's working fine with safari 

#filterOptionsContainer {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

Answer 8

我通过在移动设备上切换到多选（并隐藏可滚动div）来解决这个问题（所以没有真正的解决方案）。谢谢各位的帮助。

编辑：我终于弄明白了。基本上发生的事情是，在我切换到使用多选后，它在使用Safari时在IOS设备中表现得非常奇怪。

在进一步检查时，我的同事注意到可滚动div和多选中的dojo触摸事件（我正在使用的模板使用dojo）。我开始在模板的源代码中查找为什么这些事件被附加到所有这些元素，我注意到一个名为“dojo / touch”的dojo模块。从项目中删除此模块后，这些元素在Safari中正常工作。

带走的是'dojo / touch'和IOS Safari完全不兼容。

Answer 9

如果所有解决方案均无效，则可以尝试flex：1 1;这具有跨浏览器支持。

Answer 10

对于以后的读者来说，在display: flex的野生动物园中不起作用您必须使用display: block

溢出-y不在模态内的safari中工作

10 个答案: