ios - -webkit-overflow-scrolling：触摸，指定宽度时大内容被截断

Question

当放入可滚动的 div 时，像具有数千行的表格这样的大内容被截断（参见css、ios、iPad、-webkit-overflow-scrolling：触摸错误，大内容被截断）

<div class="longList">
  <!-- table with thousands of rows -->
</div>

CSS：

.longList {overflow: auto; height: 550px; margin: 0 auto; -webkit-overflow-scrolling: touch;}

因此，添加 position:fixed 解决了这个问题，但产生了一个新问题：在引入 position:fixed 之前，表格已经填满了整个页面宽度，在添加 position:fixed 之后它停止了这样做。

更新的CSS：

    .longList {overflow: auto; height: 550px; margin: 0 auto; -webkit-overflow-scrolling: touch; position:fixed;}

我试图通过在 div 上指定宽度（使用 longList 类）来解决它，但是每当我在 div 上指定任何宽度时，我都会回到原来的问题，而表格现在填满了整个页面（宽度方向），内容又被截断了！

有人遇到过这样的情况吗？

score 0 · Accepted Answer

所以我找到了一个适用于此的解决方案。我在使用 iFrame 和嵌入内容的 div 时遇到了类似的问题。我不确定这对 iFrame 的效果如何，但对于 div 似乎可以解决问题。

加载页面后，当违规元素在页面上可见时，使用以下代码行。这会强制重新绘制/重排元素，并将显示全部内容。

//Fix for mobile webkit browsers not rendering full content
$('.divWithContent').parent().hide().show(0);

如果您还没有出现问题的 div 或 iFrame，您可能需要添加一个包装器，这样您就不会闪烁或重建比您需要的更多的内容。

样本结构：

<div class="wrapper">
    <div class="divWithContent">
    ...
    </div>
<div>

如果您的 div 在页面加载时可见，这是您可以使用此解决方案的一种方法。您可能还需要添加一点延迟：

$(document).ready( function() {
    $('.divWithContent').parent().hide().show(0);
}

如果元素当前处于隐藏状态，这将不起作用。似乎该元素当前不必在设备视口中可见，但它必须至少在页面上而不是隐藏。

1 回答 1