Откидная карта с прокручиваемым элементом на каждой стороне с помощью -webkit-overflow-scrolling: touch; на iOS 5 - PullRequest
Новая
       17

Откидная карта с прокручиваемым элементом на каждой стороне с помощью -webkit-overflow-scrolling: touch; на iOS 5

4 голосов
/ 30 ноября 2011

У меня проблема с созданием флип-карты с прокручиваемым элементом на каждой стороне с HTML, CSS и JS для Mobile Safari на iOS 5.

Если вы прокручиваете, когда карта переворачивается или не переворачивается,прокрутка всегда происходит на элементе на спине.Прокрутка никогда не работает на передней панели.

У меня есть следующий код:

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

Ответы [ 2 ]

0 голосов
/ 28 августа 2013

Эта проблема все еще сохраняется в iOS6, по крайней мере, в моем случае, когда мне приходится прокручивать элементы div рядом друг с другом, и когда я выполняю переход с преобразованием, прокрутка не работает.

Мое решение состояло в том, чтобы переписать хотя бы один из элементов div после перехода, используя простой оператор jQuery: 

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

Я называю эти вещи ужасной правдой, которой мы не должны заниматься ...

0 голосов
/ 01 декабря 2011

Извините, это не надежный ответ (у меня нет времени на кодирование / тестирование), но я полагаю, проблема в том, что вы обновляете только преобразования ... что не влияет на то, где браузер действительно элементы.

Вы могли бы рассмотреть возможность использования события webkitTransitionEnd, которое создает z-индекс передней карты 10, а оборотной 0. 0. 1003 *

...