溢出-y 无法在 iPad 上运行

Posted 2023-03-12

【中文标题】溢出-y 无法在 iPad 上运行

【英文标题】：Overflow-y not working on iPad

【发布时间】：2016-02-04 13:47:10

【问题描述】：

我有一个带有可滚动内容的面板。它适用于除 iPad 之外的所有浏览器和设备（无论我在 iPad 上使用哪种浏览器）。

我有一个面板容器和一个面板幻灯片

.panel-container 
    position: relative;
    width:100%;
    height:100%;
    z-index:1;


.panel-slide 
    width:90%;
    height: 90%;
    display:block;
    position: absolute;
    z-index: 2;
    background-color: white;
    overflow-y: scroll;
    overflow-x: hidden;

面板幻灯片包含很多内容，所以我得到了滚动条。但是我不能在 iPad 上滚动。

我已经用谷歌搜索了这个问题并尝试了 -webkit-overflow-scrolling: touch，但我似乎无法深入了解它。

有什么办法？

【参考方案1】：

我不知道这是否会有所帮助，但我遇到了类似的问题，我就是这样解决的。

我的问题：

我的页面有一个由 AJAX 填充的弹出元素，其中包含可点击链接的列表。当此元素预先填充页面的其余部分（某些页面要求列表从初始页面加载时可见）时，它工作正常。但是，如上所述，当我使用 AJAX 打开元素并填充列表时，列表不会在 ios 上滚动。

问题，据我所知：

在单击按钮打开列表和服务器响应填充列表之间的过渡期间，我让元素显示一些简单的文本，上面写着“正在加载...”。我发现当它被删除并且元素已经从页面加载中填充时，它可以正常工作。似乎只要列表中已经存在高度大于包含元素的内容，当列表填充时它就可以滚动。

我的决心：

我所做的是在中间从“正在加载...”中获取简单的文本，并将其包装在一个会提示滚动的 div 中，例如：“<div style='height:1000px;'>Loading...</div>”，这似乎对我有用.

再次，我希望这可以帮助某人，或者如果没有，那么也许比我更有技巧的人可能能够告诉我们为什么这可能有效。

【讨论】：

我有同样的问题，我已经为我的元素设置了一个最小高度，以便它从一开始就可以滚动，但它仍然不能在 ipad 和任何其他移动设备上运行！

【参考方案2】：

任何 iPhone 操作系统中都没有滚动条。使用 2 根手指滚动。他们使用手势而不是鼠标滚动，因此您无法在没有 hack 的情况下实现这一目标。

也许值得关注http://iscrolljs.com/

【讨论】：

问题是我也不能用两根手指滚动。