移动 Safari 中的滚动动画答案

【问题标题】：Animate on scroll in mobile safari移动 Safari 中的滚动动画
【发布时间】：2013-12-01 22:23:51
【问题描述】：

我有一个带有 position:fixed 的标题，里面有一个徽标。标题在滚动时添加了一个“小”类，并将徽标从大图像更改为小图像，并使用 CSS3 过渡来实现平滑过渡。

  $(document).on("scroll",function(){
        if($(document).scrollTop()>70){ 
            $("header").removeClass("large").addClass("small");
            }
        else{
            $("header").removeClass("small").addClass("large");
            }
        });

这适用于桌面上的所有浏览器。我遇到的问题是在使用 Safari 或 Chrome 的 iOS 上，当我滚动时，动画只会在手指松开后才会出现，从而产生丑陋的用户体验。有没有办法检测滚动手势，以便在滚动视口时根据速度进行动画处理？

【问题讨论】：

标签： jquery css mobile css-transitions fixed

【解决方案1】：

绑定到事件“touchmove”。请注意，滚动期间发生的 DOM 更新是不可靠的。例如，我可以将文本附加到 div，但不能前置。我可以将 img 标签附加到 div，但不能更新现有图像元素的 src。（当我说不能 - 我的意思是我可以，但是直到滚动结束后才会绘制更改。当我说“我可以”时，我的意思是立即绘制更改）

【讨论】：

【解决方案2】：

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

Source

编辑：查看Josh Ribakoff's comment 和answer 以获取有关此声明的更多信息

所以，回答你的问题，不！没有办法做到这一点..但是！

编辑：无论如何someone found a way to do that。看一看。使用“伪造”本机滚动的 JS，您可以毫不妥协地执行您需要的操作。

【讨论】：

他们所做的工作真是太棒了。
恕我直言，这是错误的。您的来源没有说明来源，我绝对可以将 DOM 作为“touchmove”事件的一部分进行操作，并将文本附加到 div。我什至可以将图像标签附加到一个 div 中，当我还在触摸屏幕时它们会加载。
"my source" 是 jQuery 网站，所以他们并不是真正的新手。反正几个月过去了。幸运的是，更新可能已经解决了这个问题。这个答案是 6 个月前给出的
他们的页面状态是对问题的简化。您可以操作 DOM，但仅限于某些时候。例如，如果 DOM 更新触发了 CSS 过渡，则该过渡将在您滚动时暂停。更新现有 DOM 元素的属性是排队的，而追加新的 DOM 元素不是（取决于影响追加的 DOM 元素的 CSS）。总而言之，更新 DOM 非常不可靠，但某些更新有时会起作用。
无论那句话是否简化，是否某些过渡在“绘制”之前暂停，这句话都不是“错误”的。您只能说它“不准确”。无论如何感谢您提供的详细信息，我相信很多像我这样的设计师会发现这非常有趣和准确:) 我也在我的答案中添加了你的信息（引用）。