7

我有一个设置为触摸 webkit-overflow-scrolling 的 div。在 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);
    }
}

更新

经过大量尝试，我认为如果不使用一些库来尝试模仿动量滚动而不是使用内置选项（我发现它从来没有真正给出平滑的结果），那真的是不可能的。Apple 显然非常担心会干扰其动量滚动动画并阻止其正确渲染的事情。

我最终移除了动量滚动，并在触发时立即检测到滑动并在一堆元素中移动。

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

4

0 回答 0