最近几天,我一直被 webkit-overflow-scrolling touch 折磨着。我的问题很简单 - 我想通过JS点击特定元素并对其进行操作。但是当它在 'webkit-overflow-scrolling: touch' 的 div 中时,一旦 iOS 的动量滚动接管,元素似乎就跟不上了。比如,当我开始滚动时,列表仍在滚动,我轻触其中一个元素,它却似乎访问了错误的元素?理想情况下,我想在动量滚动开始时识别,如果它仍在进行中,则轻触只会停止它而不是首先选择一个元素,但我甚至无法让基础工作正常运行。
我正在 iPad 3 上测试 iOS 6.01。看起来 webkit 滚动非常有问题,因为 onscroll 事件似乎也很难控制,并且有时会在滚动结束之外的时间触发,这与普遍使用的 iOS 不同。
如果有人有关于如何使此行为在不使用 iScroll 或关闭 webkit-overflow-scroll 的情况下正常工作的想法,将不胜感激!
<style>
li {
height: 40px;
background: #999;
}
</style>
<div style="-webkit-overflow-scrolling: touch; height: 400px; background: #CCC; width: 400px; overflow: scroll;" >
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
</ul>
</div>
<div id="content"></div>
<script>
var elements = document.getElementsByTagName('li');
for(var i = 0, len = elements.length; i < len; i++) {
elements[i].ontouchstart = function (e) {
document.getElementById('content').innerHTML = document.getElementById('content').innerHTML+this.innerHTML;
}
}
</script>