iPad上的Webkit溢出滚动触摸CSS错误

Posted 2023-03-05

【中文标题】iPad上的Webkit溢出滚动触摸CSS错误

【英文标题】：Webkit overflow scrolling touch CSS bug on iPad

【发布时间】：2012-02-23 10:36:50

【问题描述】：

如果您在 iPad 设备上使用最新版本的 ios 访问此页面，则可以跟随。

http://fiddle.jshell.net/will/8VJ58/10/show/light/

我有两个新的 -webkit-overflow-scrolling 元素：应用的属性和价值。左侧灰色区域内容丰富，可以纵向或横向滚动。右侧只会横向滚动。

如果您从横向开始（以横向刷新），您可以使用惯性滚动滚动这两个区域。效果很好。现在将您的 iPad 翻转为纵向，只有左​​侧区域会滚动。这是预期的。但是当你翻回横向时，右侧区域将不再滚动，而左侧区域仍然可以。

很明显如何阻止这种情况发生，但我并不总是有内容来填充该区域。

有什么想法吗？

提前致谢，Will :)

【参考方案1】：

迟到了类似但更简单的解决方案。

var $el = $('.myElementClass');

function setOverflow()
    $el.css(webkitOverflowScrolling: 'touch', overflow: 'auto');


function resizeHandler()
    $el.css(webkitOverflowScrolling: 'auto', overflow: 'hidden');
    setTimeout(setOverflow,10);

[编辑] 注意，经过（大量）实验，我发现 display:none 声明肯定会破坏 webkit-overflow-scrolling: touch 功能。 永远不要在应该支持触摸滚动的元素（或元素的父元素）上使用它。

【讨论】：

绝对简单得多！对此稍作改动（切换单独的 css 类而不是手动修改属性）对于恢复原始溢出属性更好。

我想我也尝试过，但又回到手动设置属性。不知道为什么。

谢谢！！我在 ipad4 上遇到了同样的问题。这解决了它。我和 ProVega 有同样的想法，但这个解决方案似乎更干净。非常感谢！你为我节省了一些时间！

谢谢阿梅尔。像魅力一样工作！

【参考方案2】：

我能够使用已知的“修复”来强制 iOS6 重绘以纠正此问题，而无需使用 setTimeout。

$(window).on('orientationchange', function()

    var $elem=$('[selector]');
    var orgDisplay=$elem.css('display');
    $elem.css('display','none');
    $elem.get(0).offsetHeight;
    $elem.css('display',orgDisplay);
);

【讨论】：

我喜欢在方向改变时“切换”显示状态的解决方案。我觉得它比重新计算高度需要更少的资源。

我也喜欢这个解决方案。不幸的是，它并没有直接对我有用。在orientationchange 之后需要额外的setTimeout。仍然比明确设置高度更可取。

【参考方案3】：

我在 iPhone、iPod 和 iPad 上遇到了同样的错误。这不仅限于后者。

我尝试了所有建议作为解决方案的方法，但最终甜蜜的组合最终是分离元素，将其附加到其容器并在执行此操作时显式为其分配自己的高度，如下所示：

$(window).on('orientationchange', function()
  var el  = $('.troublemaker').detach(),
      elh = el.height();
  setTimeout( el.css('height':elh+'px').appendTo('.container'), 50 );
);

【参考方案4】：

我实际上遇到了完全相同的问题。我已将其范围缩小到它会影响 DIV，当方向改变时，其内容不再需要滚动。

在你的例子中。右侧的DIV横向滚动，纵向不需要滚动，但需要再次滚动。当两个 DIV（左和右）无论方向如何都需要滚动时，我已经对此进行了测试，这不是问题。

更新：

我实际上似乎已经解决了这个问题！

问题似乎是时间问题。在调整大小期间，内部内容不足以保证在溢出的外部 DIV 上滚动。在浪费了一天的时间之后，我终于想出了这个技巧：

<div id="header" style="position:fixed; height:100px">Header</div>
<div id="content" style="overflow: auto; -webkit-overflow-scrolling: touch">
   <div id="contentInner">
      content that is not long enough to always scroll during different orientations
   </div>
</div>

当页面调整大小时，这是我的逻辑：

   function handleResize()
    
        var iHeight = $(window).height() - $("#header").height();

        // Height needs to be set, to allow for scrolling - 
        //this is the fixed container that will scroll
        $('#content').height(iHeight - 10);

        // Temporarily blow out the inner content, to FORCE ipad to scroll during resizing
        // This is a timing issue where the inner content is not big enough during resize post orientation to require the outer DIV to scroll
        $('#contentInner').height(1000);

        // Set the heights back to something normal
        // We have to "pause" long enough for the re-orientation resize to finish
        window.setTimeout(delayFix, 10);


function delayFix()

    var iHeight = $(window).height() - $("#header").height();

    // Inner divs force the outer div to always have at least something to scroll.  This makes the inner DIV always "rubber-band" and prevents
    // the page from scrolling all over the place for no reason.
    // The height of the inner guy needs to be AT LEAST as big as the container and actually a nip bigger to cause the
    // scrollable area to 'rubber band' properly
    $('#contentInner').height(iHeight + 20);

【讨论】：

我完全忘记了这个问题，实际上我最终也想通了，解决方案与您完全相同。我应该把代码放在这里，为你节省了一些时间，哎呀！不过谢谢:)

如果有人感兴趣，请找到另一种方式...欢迎任何 cmets。见下文。

这真的很棒。太糟糕了，故障必须首先存在。