`-webkit-overflow-scrolling: touch` сломан для первоначальных внеэкранных элементов в iOS7

Видя, как семена GM были выпущены, мы можем поговорить об этом сейчас!

Похоже, что в iOS7 "-webkit-overflow-scrolling: touch" сломан. события касания для элементов, которые изначально выходят из экрана, не срабатывают (или в некоторых случаях просто ненадежны).

Вот пример:

<!DOCTYPE html><html> <head><title>TEST</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="apple-mobile-web-app-capable" content="yes" /> <style> #scrollbox { position: fixed; top: 0px; width: 100%; height: 100%; overflow: scroll; -webkit-overflow-scrolling: touch; } .touchDiv { position: relative; width:100%; height:80px; background-color: #FFBBBB; } ul, li { text-indent: 0px; list-style: none; padding: 0px; margin: 0px; } li { padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid #333; } </style> <script type="text/javascript"> function onBodyLoad() { var touchDiv = document.getElementById("bottomDiv"); touchDiv.ontouchstart = function(e) { alert("touched"); }; touchDiv = document.getElementById("topDiv"); touchDiv.ontouchstart = function(e) { alert("touched"); }; } </script> </head> <body onload="onBodyLoad()"> <div id='scrollbox'> <div id="topDiv" class="touchDiv">Fires an event when touched</div> <ul> <li><a href='#' onclick="alert('1')">Link 1</a></li> <li><a href='#' onclick="alert('3')">Link 3</a></li> <li><a href='#' onclick="alert('4')">Link 4</a></li> <li><a href='#' onclick="alert('5')">Link 5</a></li> <li><a href='#' onclick="alert('6')">Link 6</a></li> <li><a href='#' onclick="alert('7')">Link 7</a></li> <li><a href='#' onclick="alert('8')">Link 8</a></li> <li><a href='#' onclick="alert('9')">Link 9</a></li> <li><a href='#' onclick="alert('10')">Link 10</a></li> <li><a href='#' onclick="alert('11')">Link 11</a></li> <li><a href='#' onclick="alert('12')">Link 12</a></li> <li><a href='#' onclick="alert('13')">Link 13</a></li> <li><a href='#' onclick="alert('14')">Link 14</a></li> <li><a href='#' onclick="alert('15')">Link 15</a></li> <li><a href='#' onclick="alert('16')">Link 16</a></li> <li><a href='#' onclick="alert('17')">Link 17</a></li> <li><a href='#' onclick="alert('18')">Link 18</a></li> <li><a href='#' onclick="alert('19')">Link 19</a></li> <li><a href='#' onclick="alert('20')">Link 20</a></li> <li><a href='#' onclick="alert('21')">Link 21</a></li> <li><a href='#' ontouchstart="alert('22')">Link 22</a></li> </ul> <div id="bottomDiv" class="touchDiv">Fires an event when touched 2</div> </div> </body> 

Я предполагаю, что это нарушит большинство мобильных оптимизированных веб-приложений.

Любые проблемы с вышеуказанным кодом? И / или есть какие-то обходные пути?

(Я уже поднял ошибку с яблоком – некоторое время назад и без ответа)

Похоже, есть обходной путь к этой проблеме на форумах apple dev

Огромное спасибо господину Байкоану.

В основном вам нужно прослушивать события касания на родительском прокрутке div. Поэтому в моем случае добавьте:

 document.getElementById("scrollbox").addEventListener('touchstart', function(event){}); 

к функции onBodyLoad.

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

Вышеприведенный ответ работает для меня. Вот версия jQuery, описанная выше:

 $('#scrollbox').on('touchstart', function(event){}); 
  • Webkit переполнения прокрутки Touch ошибка CSS на iPad
  • UIWebView застрял после webViewDidStartLoad
  • Как диагностировать сбои, которые, как представляется, являются внутренними для WebCore (Thread 2, SIGSEGV)
  • Чтение трассировки стека iOS Webkit
  • WKWebView заставляет мой контроллер просмотра протекать
  • Youtube iframe встраивается с масштабированием webkit-transform на iOS
  • Как остановить MPAVItem сбой моего приложения iOS с видео в моем UIWebView?
  • Вид ввода типа даты в Safari на iOS
  • iOS Webkit игнорирует медиа-запросы
  • iOS: сбой WebKitLegacy
  • HTML-разбивка на страницы
  • Давайте будем гением компьютера.