使用-webkit-overflow-scrolling: touch在每一面都有滚动元素的翻转卡片;在iOS 5上

我在iOS 5的Mobile Safari上使用HTML, CSS和JS创建一个每边都有滚动元素的翻转卡片时遇到了问题。

如果在卡片翻转或未翻转时滚动，则滚动总是发生在背面的元素上。滚动从来不在前面工作。

我有以下代码:

<ol id="front" onclick="flip();">
  <li>Front</li>
  ...
  <li>Front</li>
</ol>
<ol id="back" class="flipped" onclick="flip();">
  <li>Back</li>
  ...
  <li>Back</li>
</ol>

function flip(){
  var front = document.getElementById("front");
  var back = document.getElementById("back");
  if (front.className != "flipped") {
    front.className = "flipped";
    back.className = "";
  } else {
    front.className = "";
    back.className = "flipped";
  }
}

CSS

#front, #back { position: absolute; width: 400px; height: 400px; overflow: scroll; -webkit-overflow-scrolling: touch; -webkit-backface-visibility: hidden; -webkit-transition: all 500ms linear; } #front.flipped { -webkit-transform: perspective(100px) rotateY(180deg); } #back.flipped { -webkit-transform: perspective(100px) rotateY(-180deg); }
下面是实际的代码(试试iOS 5): http://jsfiddle.net/sennevdb/bDh5b/embedded/result

对不起，这不是一个可靠的答案(没有时间编码/测试)，但我想问题是你只是更新转换…这并不影响浏览器认为元素的实际位置。

你可以考虑使用webkitTransitionEnd事件，使正面卡片的z-index为10，背面卡片的z-index为0。

这个问题仍然存在于iOS6中，至少在我的情况下，我必须滚动的div的旁边，当我执行转换转换，滚动不起作用。

我的解决方案是使用一个简单的jQuery语句在转换后重写至少一个div:

html.on('webkitTransitionEnd', '.one-of-my-scrollers', function() { setTimeout(function() { var d = $('.one-of-my-scrollers'); d.parent().append(d); }, 0); });
这以某种方式触发浏览器中的流，导致滚动之后再次正常工作。

另一种方法是禁用元素上的溢出并立即启用它，如:

html.on('webkitTransitionEnd', '.one-of-my-scrollers', function() { setTimeout(function() { var d = $('.one-of-my-scrollers'); d.css('overflow', 'hidden'); setTimeout(function() { d.css('overflow', 'auto'); }, 0); }, 0); });

相关内容

最新更新

热门标签：