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

【问题标题】：A flip card with a scrolling element on each side using -webkit-overflow-scrolling: touch; on iOS 5使用 -webkit-overflow-scrolling: touch; 在每一面都有一个滚动元素的翻转卡片在 iOS 5 上
【发布时间】：2011-11-30 19:50:47
【问题描述】：

我在使用 HTML、CSS 和 JS 为 iOS 5 上的 Mobile Safari 创建带有滚动元素的翻转卡片时遇到问题。

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

我有以下代码：

HTML

<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

【问题讨论】：

标签： css ios5 mobile-safari

【解决方案1】：

抱歉，这不是一个可靠的答案（没有时间编码/测试），但我想问题是您只是在更新转换......这不会影响浏览器实际认为的位置元素是。

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

【讨论】：

【解决方案2】：

这个问题在 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);  
});

我将这些事情称为我们不应该做的丑陋事实......

【讨论】：