同步(非被动)滚动事件
Synchronous (non-passive) scroll events
浏览器使 scroll
事件异步化(即 {passive: true}
)。对于我的用例,同步提供了更好的用户体验。
有什么方法可以重新获得同步滚动事件,这样我就可以在 (scrollLeft, scrollTop, clientWidth, clientHeight)
矩形发生变化但在滚动呈现之前进行 DOM 操作?
作为一种奇怪的解决方法,在 Firefox 中打开和关闭 Dev Tools 会使事件同步,这就是我注意到同步提供了更好的用户体验的方式。同时将 apz.disable_for_scroll_linked_effects
设置为 true 使事件同步。同样在 Safari(桌面)中,它们似乎总是同步的。
我尝试过的事情:
div.addEventListener('scroll', update, {passive: false})
但 passive: false
被忽略。
Object.defineProperty(Object.getPrototypeOf(div), 'scrollTop', {get: ..., set: ...})
但未调用 setter。
div.addEventListener('wheel', update, {passive: false})
但我不确定是否可以从 deltaY
-> 更新 scrollTop
进行映射,而且它不解决通过滚动条滚动的问题。
我不相信这是可能的,你将不得不进入造假的境界。有一篇关于它是如何(或曾经是?)在代码镜像 here
中完成的有趣文章
基本思想是使滚动条呈现在正确高度的某些元素上,并响应滚动条上的事件以更新用户实际看到的内容。
浏览器使 scroll
事件异步化(即 {passive: true}
)。对于我的用例,同步提供了更好的用户体验。
有什么方法可以重新获得同步滚动事件,这样我就可以在 (scrollLeft, scrollTop, clientWidth, clientHeight)
矩形发生变化但在滚动呈现之前进行 DOM 操作?
作为一种奇怪的解决方法,在 Firefox 中打开和关闭 Dev Tools 会使事件同步,这就是我注意到同步提供了更好的用户体验的方式。同时将 apz.disable_for_scroll_linked_effects
设置为 true 使事件同步。同样在 Safari(桌面)中,它们似乎总是同步的。
我尝试过的事情:
div.addEventListener('scroll', update, {passive: false})
但passive: false
被忽略。Object.defineProperty(Object.getPrototypeOf(div), 'scrollTop', {get: ..., set: ...})
但未调用 setter。div.addEventListener('wheel', update, {passive: false})
但我不确定是否可以从deltaY
-> 更新scrollTop
进行映射,而且它不解决通过滚动条滚动的问题。
我不相信这是可能的,你将不得不进入造假的境界。有一篇关于它是如何(或曾经是?)在代码镜像 here
中完成的有趣文章基本思想是使滚动条呈现在正确高度的某些元素上,并响应滚动条上的事件以更新用户实际看到的内容。