Question

在iOS 5上创建一个带有滚动元素的翻转卡时，我遇到了问题，其中包含HTML，CSS和JS for 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>

JS

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

Answer 1

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

您可以考虑使用webkitTransitionEnd事件，该事件生成前置卡10的z-index和后面的0。

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

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

翻盖卡，每侧使用滚动元素-webkit-overflow-scrolling：touch;在iOS 5上

2 个答案: