-webkit溢出滚动：触摸，大内容指定宽度时被切断 [英] -webkit-overflow-scrolling: touch, large content gets cut off when specifying a width

问题描述

如果一个包含数千行的表格的大内容被放在一个可滚动的div中，就会被截断（参见 css，ios，iPad，-webkit溢出滚动：触摸bug，大内容被切断） p>

Large content like a table with thousands of row was getting cut off when put inside a scrollable div (see 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，添加位置后停止这样做。

So, adding position:fixed resolved this issue but gave birth to a new problem: the table was filling up the entire page width before introducing position:fixed, after adding position it stopped to do that.

更新css：

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

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

I tried to solve it by specifying a width on the div (with class longList) but whenever I specify any width on the div, I am back to the original problem, while the table fills up the entire page now (width-wise), the content gets cut off again!

任何人遇到这样的情况？

Anybody came across a situation like this?

推荐答案

所以我找到了一个解决方案， 。我有一个类似的问题，既与iFrames和divs与嵌入的内容。我不知道这对于iFrames是如何工作，但对于divs它似乎做的伎俩。

So I've found a solution that works for this. I was having a similar problem both with iFrames and divs with embedded content. I'm not sure how well this works for iFrames, but for divs it seems to do the trick.

使用下面的代码行之后网页已加载 违规元素在网页上可见。

Use the following line of code after the page is loaded while the offending element is visible on the page. This forces a repaint/reflow of the element and it will show the full content.

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

您可能需要为div或iFrame添加一个封装，如果您

You may need to add a wrapper just for the div or iFrame that is having the problem if you don't have one already, that way you aren't flashing or rebuilding more content than you need to.

示例结构：

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

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

If your div is visible on page load, here's one way you could use this solution. You may need to add a slight delay too:

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

$ b b

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

This will not work if the element is currently hidden. It doesn't seem that the element has to be currently visible in the device viewport, but it must at least be on the page and not hidden.

这篇关于-webkit溢出滚动：触摸，大内容指定宽度时被切断的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！