Question

当放入可滚动的div中时，大型内容（如包含数千行的表格）会被切断（请参阅css, ios, iPad, -webkit-overflow-scrolling: touch bug, large content gets cut off）

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

的CSS：

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

经过一番研究后，我在http://johanbrook.com/browsers/native-momentum-scrolling-ios-5/之后解决了这个问题。

所以，添加position：fixed解决了这个问题，但又产生了一个新问题：在引入position：fixed之前，表填满了整个页面宽度，在添加位置后它停止了这样做。

更新了css：

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

我尝试通过在div上指定宽度来解决它（使用类longList）但是每当我在div上指定任何宽度时，我都回到原来的问题，而表现在填满整个页面（宽度 - 明智的），内容再次被切断！

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

Answer 1

所以我找到了一个适用于此的解决方案。我在iFrames和嵌入内容的div方面遇到了类似的问题。我不确定它对iFrames的效果如何，但对于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); }

如果元素当前被隐藏，这将不。似乎元素当前在设备视口中不可见，但它必须至少在页面上而不是隐藏。

-webkit-overflow-scrolling：触摸，指定宽度时会切断大内容

1 个答案: