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

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

我有两个新的元素-webkit溢出滚动：触摸；应用的属性和值。左侧灰色区域有大量内容，可以纵向或横向滚动。右侧将仅在横向中滚动

若你们从横向开始（横向刷新），你们可以用惯性滚动来滚动这两个区域。效果很好。现在将你的iPad翻转到纵向，只有左手区域会滚动。这是我们的初衷。但是，当您翻转回横向时，右侧区域将不再滚动，而左侧区域仍然可以

很明显，如何阻止这种情况发生，但我并不总是有内容来填补这一领域

有什么想法吗

---

提前谢谢，
威尔：）

我实际上也有同样的问题。我已经把范围缩小到这样一个事实：当方向改变时，它会影响那些内容不再需要滚动的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>

---

很晚才推出类似但更简单的解决方案

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

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

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

[编辑] 小心，经过多次实验，我发现

显示：无

声明肯定会破坏

webkit溢出滚动：触摸

功能。

---

不要在本应支持触摸滚动的元素（或元素的父元素）上使用它。

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

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

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

我能够使用已知的“修复程序”强制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);
});

---

我完全忘记了这个问题，事实上我最终也找到了答案，答案和你完全一样。我应该把代码放回这里，为你节省一些时间，哎呀！不过谢谢：）如果有人感兴趣的话，你可以找到另一种方法。。。欢迎任何意见。看下面。这真的很有效。糟糕的是，故障必须首先出现在那里。肯定要简单得多！不过，稍微改变一下（切换一个单独的css类，而不是手动修改属性）对恢复原始溢出属性更好。我想我也尝试过，但还是回到了手动设置属性。不知道为什么。谢谢！！我在ipad4上也有同样的问题。这把它修好了。我和ProVega有相同的想法，但是这个解决方案看起来更干净。谢谢！你为我节省了一些时间！！谢谢你，阿姆尔。工作很有魅力！我喜欢在方向改变时“切换”显示状态的解决方案。我觉得它比重新计算高度需要更少的资源。我也喜欢这个解决方案。不幸的是，它没有直接为我工作。在

orientationchange

之后需要额外的

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);
});