touchmove 中的 JavaScript DOM 更改延迟到移动 Safari 上的滚动结束
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10482227/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JavaScript DOM changes in touchmove delayed until scroll ends on mobile Safari
提问by Hilton Campbell
In mobile safari, in the course of handling touchmovefor an element, I change the classNameof that element. Unfortunately, the visual change does not occur while the user is scrolling, or until the very end of an inertial scroll.
在移动 safari 中，在处理touchmove元素的过程中，我更改了className该元素的 。不幸的是，在用户滚动时或直到惯性滚动结束时，视觉变化不会发生。
What can I do to get the classNameto visually take immediately?
我该怎么做才能className立即获得视觉效果？
More:Apparently this isn't limited to className changes, but seemingly any change to the DOM, such as innerHTMLand style.
更多：显然这不仅限于 className 更改，而且似乎是对 DOM 的任何更改，例如innerHTML和style。
采纳答案by Andy
This is by design unfortunately. iOS safari will queue up all DOM manipulation until the end of a scroll or gesture. Effectively the DOM is frozen during a scroll.
不幸的是，这是设计使然。iOS safari 会将所有 DOM 操作排队，直到滚动或手势结束。DOM 在滚动期间有效地被冻结。
I thought I could find a reference to this on an apple developer page, but I can only find this link to jQueryMobile: http://jquerymobile.com/test/docs/api/events.html.
我以为我可以在苹果开发人员页面上找到对此的引用，但我只能找到指向 jQueryMobile 的链接：http: //jquerymobile.com/test/docs/api/events.html。
Note that iOS devices freeze DOM manipulation during scroll, queuing them to apply when the scroll finishes. We're currently investigating ways to allow DOM manipulations to apply before a scroll starts
请注意，iOS 设备在滚动期间冻结 DOM 操作，在滚动完成时将它们排入队列以应用。我们目前正在研究允许在滚动开始之前应用 DOM 操作的方法
Hope this helps!
希望这可以帮助！
回答by rje
I actually built that site, and yes the way to get around this limitation is to not scroll the site using the built in browser functionality but fake it. The JS listens to scroll wheel and keyboard events and tweens the css top property of the main container to its own 'scrollTop'. The scrollbar on the right is of course a custom JS one. In this case its synced to the same internal 'scrollTop' value.
我实际上构建了该站点，是的，绕过此限制的方法是不使用内置浏览器功能滚动站点，而是伪造它。JS 监听滚轮和键盘事件，并将主容器的 css top 属性补间到它自己的“scrollTop”。右边的滚动条当然是自定义的 JS 滚动条。在这种情况下，它同步到相同的内部“scrollTop”值。
The whole site is just one big tween really, with the main timeline being its scrollTop position, and all the sub animations being triggered at certain times. The JS isn't minified so take a look in the ScrollAnimator.js file, its all there.
整个站点实际上只是一个大的tween，主时间线是它的scrollTop 位置，所有的子动画都在特定时间触发。JS 没有缩小，所以看看 ScrollAnimator.js 文件，它就在那里。
回答by bumfo
Simply change position to -webkit-sticky. Do not set top so it will look just like a normal element, but performs like a fixed element. And you can update its style except position immediately.
只需将位置更改为-webkit-sticky。不要设置顶部，这样它看起来就像一个普通元素，但表现得像一个固定元素。并且您可以立即更新其除位置外的样式。
