webkit-overflow-scrolling期间的任何位置选项:触摸事件

Mat*_*ald 7 javascript dom touch dom-events ios

我有一个div与webkit溢出滚动设置触摸.在iOS上,这会在touchmove事件期间给我一个更新的位置,但是一旦用户放开,此事件结束并且在事件全部停止之前进行最后一次对touchend的调用,但是div继续动量滚动.

这是我想要的行为,但我也希望在此动态滚动期间更新页面.

当touchend事件发生时我触发对requestAnimationFrame的调用,并且我可以在动量滚动发生时循环它.但是当我获得DOM信息时,它会被冻结,直到mometnum滚动结束.

我已经尝试使用滚动元素的滚动位置和elementFromPoint,但两者都只是在触发touchend时滚动div所处的位置,并且在动量滚动结束之前不会更新.

有谁知道在iOS上获取实时DOM信息的任何方式(6+,不担心5)

这是我正在使用的一些代码:

var glideStart;
var bird_scanner = document.getElementById('bird-scanner');
bird_scanner.addEventListener('touchend',function()
{
    glideStart = null;
    requestAnimationFrame(glide);
});

function glide(timestamp)
{
    // if we need to reset the timestamp
    if( glideStart === null )
    {
        glideStart = timestamp;
    }

    // determine if we've moved
    var bird_scanner = document.getElementById('bird-scanner');

    console.log( document.elementFromPoint(337,568) );

    // calculate progress (keep running for a very long time so we see what happens when momentum ends)
    var progress = timestamp - glideStart;
    if( progress < 10000 )
    {
        requestAnimationFrame(App.Controller.bird.glide);
    }
}
Run Code Online (Sandbox Code Playgroud)

更新

一个经过很多在这个尝试,我认为这真的是不可能不使用某些库,试图模仿的势头滚动,而不是使用内置的选项(这是我发现从来没有真正赋予作为流畅的效果).Apple显然非常担心会干扰动量滚动动画并阻止其正确渲染的事情.

我最终删除了动量滚动,只是检测到滑动并在触发时立即移动一堆元素.

我确实注意到一些特别奇怪的行为.当我有webkit-overflow-scrolling时:触摸设置在向上/向下滚动页面并向touchend事件添加setTimeout(some_func,0)的元素上,直到动量滚动结束时才触发该函数.当我在向左/向右滚动时尝试相同的事情时,它立即触发了该功能.不知道为什么会这样,决定它必须只是一些奇怪的webkit怪癖.