7

我需要使一个元素的滚动偏移量与另一个元素（实际上是窗口）保持同步，而在移动 Safari（iPad）上滚动的惯性“滚降”阶段，我无法做到这一点。

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

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

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

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

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

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

这是一个工作演示。

尝试在 iPad 上滚动它以查看“惯性滑行”问题。不幸的是，由于 iPad 在 iframe 滚动方面的奇怪行为，我无法让它在 jsFiddle 上运行。

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

问题：

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

3 回答 3

4

iOS 实际上在惯性滚动发生时冻结了 DOM 操作和Javascript。这是我制作的一个简单演示，用于说明在普通桌面环境中滚动与 iPad 之间的区别：http: //jsfiddle.net/notjoelshapiro/LUcR6/。这段代码中只有这个 JS：

var num = 0;
function updateNum(){
    num++;
    $('#awesomeDiv').text(num);
}
$(window).scroll(updateNum);

在滚动时，它会增加一个数字并将其显示在页面底部。您会看到屏幕底部的滚动编号仅在惯性滚动停止时才增加。如果 Javascript 在后台运行，它不会刷新，直到滚动结束，但数字应该增加得更高。

因此，具体回答您的问题：

在惯性滚动阶段是否触发了任何触摸或滚动事件？

负面的，幽灵骑士。

有没有办法在那个阶段运行 Javascript 回调？

往上看。

有没有办法使用 CSS 或 JS 以外的其他技术同步两个元素（X 或 Y，不是两者）的滚动偏移量？

不太清楚你在这里的意思，JS 可以做你需要的所有数学运算，但它必须在惯性滚动完成时完成。不过老实说，这可能是 tl;dr 的症状，因为我现在正在工作。

你看过iScroll库吗？它模拟触摸和非触摸环境的惯性（或非惯性）滚动，并在“滚动”和“惯性滚动”期间/之后为您提供 JS 回调，并提供大量信息可用于计算您在页。

于 2013-03-18T18:42:45.993 回答
4

OldDrunkenSailor 击败我建议iScroll。

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

这是带有猴子补丁的 iScroll 的演示版本，用于添加即使在惯性阶段也会触发的自定义事件：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 以实现反向关系。

于 2013-03-18T20:35:04.510 回答
0

滚动开始时触发。请注意，iOS 设备在滚动期间冻结 DOM 操作，将它们排队以在滚动完成时应用。我们目前正在研究允许在滚动开始之前应用 DOM 操作的方法。

http://jquerymobile.com/demos/1.0rc1/docs/api/events.html#/demos/1.0rc1/docs/api/events.html

这就是他们在滚动开始部分所说的

于 2013-03-18T11:05:09.607 回答