diff --git a/routes/_components/virtualList/VirtualListContainer.html b/routes/_components/virtualList/VirtualListContainer.html index ddeefebf..9f3d7c49 100644 --- a/routes/_components/virtualList/VirtualListContainer.html +++ b/routes/_components/virtualList/VirtualListContainer.html @@ -5,6 +5,7 @@ import { isFullscreen, attachFullscreenListener, detachFullscreenListener } from '../../_utils/fullscreen' import { mark, stop } from '../../_utils/marks' import { scheduleIdleTask } from '../../_utils/scheduleIdleTask' + import { isMobile } from '../../_utils/isMobile' const SCROLL_EVENT_DELAY = 300 @@ -72,7 +73,13 @@ }, onScroll(event) { let { scrollTop, scrollHeight } = event.target - scheduleIdleTask(() => { // delay slightly to improve scroll perf + + // On mobile devices, this can make scrolling more responsive. On + // desktop browsers... it's probably overkill, and can lead to a + // checkerboarding issue ("I just scrolled, why is it blank for 5 seconds?"). + let runTask = isMobile() ? scheduleIdleTask : requestAnimationFrame + + runTask(() => { mark('onScroll -> setForRealm()') this.store.setForRealm({scrollTop, scrollHeight}) stop('onScroll -> setForRealm()') diff --git a/routes/_utils/isMobile.js b/routes/_utils/isMobile.js new file mode 100644 index 00000000..ecab10ec --- /dev/null +++ b/routes/_utils/isMobile.js @@ -0,0 +1,11 @@ +// Rough guess at whether this is a "mobile" device or not, for the purposes +// of "device class" estimations + +let cached + +export function isMobile () { + if (!cached) { + cached = !!(process.browser && navigator.userAgent.match(/(iPhone|iPod|iPad|Android)/)) + } + return cached +}