惯性滚动时如何同步两个元素的滚动偏移

我需要使一个元素的滚动偏移量与另一个元素（实际上是窗口）保持同步，但在 Mobile Safari (iPad) 上滚动的惯性“滚动”阶段，我遇到了麻烦。

我有几个 divposition:fixed; overflow:hidden我需要保持它们的滚动偏移与窗口的滚动偏移同步（意味着整个主体滚动。）通常我会像这样编码（jQuery）：

var $win = $(window),
    $div1 = $(...)

$win.scroll(function() { 
    $div1.scrollTop($win.scrollTop())
})

但是在iPad上测试界面时，我注意到div在触摸阶段（当你用手指拖动虚拟页面时）和惯性阶段（当你放手并且页面减慢速度时）都没有更新。一个停留。

我通过注册处理程序来解决拖动阶段的问题touchmove事件以及scroll one.

但我找不到解决惯性阶段问题的方法。 div 保持静止（并且慢慢地与页面的其余部分不同步），直到惯性运动完全停止，此时滚动事件最终被触发并且它跳到适当的位置。

这是一个工作演示。 http://www.gruppo4.com/scrolling_demo/demo.html

尝试在iPad上滚动看看是否存在“惯性滚动”问题。不幸的是，由于 iPad 的 iframe 滚动行为很奇怪，我无法让它在 jsFiddle 上工作。

如果我可以在该阶段运行轮询，我就可以在两个元素之间保持表面上的同步。我尝试过setTimeout, setInterval, and requestAnimationFrame，但它们都不会在惯性滚动阶段触发。似乎所有 Javascript 都会在该阶段停止。

问题：

• 在惯性滚动阶段是否触发了任何触摸或滚动事件？
• 有没有any在该阶段运行 Javascript 回调的方法？
• 有没有办法使用CSS或JS以外的其他技术来同步两个元素（X或Y，而不是两者）的滚动偏移量？

老醉水手比我先提出建议iScroll http://cubiq.org/iscroll-4.

不幸的是，开箱即用的 iScroll 只是复制了与本机惯性滚动相同的问题 - 在惯性阶段没有事件处理。

这是您的演示版本，其中包含猴子修补的 iScroll，以添加即使在惯性阶段也会触发的自定义事件：https://dl.dropbox.com/u/15943645/scrollingdemo.html https://dl.dropbox.com/u/15943645/scrollingdemo.html

在我的第二代 iPad 上运行良好。

JS:

// Disable touch events
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

// Patch iScroll for position change custom event
iScroll.prototype._oldPos = iScroll.prototype._pos;
iScroll.prototype._pos = function(x, y) {
    this._oldPos(x, y);
    if (this.options.onPositionChange) this.options.onPositionChange.call(this);
}

$(function() {
    var $win = $(window),
        $div_cols = $('#cols'),
        $div_rows = $('#rows'),
        $div_body = $('#body')

    // attach scrolling sync handler and execute it once
    function sync_scroll(e) {
        $div_cols.scrollLeft(0 - $div_body.position().left);
        $div_rows.scrollTop(0 - $div_body.position().top);

    }           

    // initialize iScroll on wrapper div, with position change handler
    var myScroll = new iScroll('iscroll_wrapper', {
        bounce: false,
        onPositionChange: sync_scroll
    });
})

CSS:

#iscroll_wrapper {
    position:absolute;
    z-index: 1;
    left: 168px; 
    top:77px; 
    bottom:0px; 
    right:0;
    overflow:auto;
}

#body {
    position:absolute;
    z-index: 1;
    width: 2046px; 
    height: 3376px;

}

请注意，只有主体响应触摸事件，但您可以将该技术扩展到行和列 div 以获得相反的关系。