Skip to content

fix(ScrollControls): resolve infinite scrolling issues across browsers #2508

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

fix(ScrollControls): resolve infinite scrolling issues across browsers #2508

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
97268c1
fix(ScrollControls): resolve infinite scrolling issues across browsers
kaylaa0 Aug 6, 2025
9d6b648
fix(ScrollControls): adjust horizontal scrolling on resize
kaylaa0 Aug 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 40 additions & 7 deletions src/web/ScrollControls.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,7 @@ export function ScrollControls({
const [fixed] = React.useState(() => document.createElement('div'))
const target = gl.domElement.parentNode! as HTMLElement
const scroll = React.useRef(0)
const disableScrollUpdate = React.useRef(false)

const state = React.useMemo(() => {
const state = {
Expand Down Expand Up @@ -161,29 +162,35 @@ export function ScrollControls({
if (events.connected === el) {
const containerLength = size[horizontal ? 'width' : 'height']
const scrollLength = el[horizontal ? 'scrollWidth' : 'scrollHeight']
const scrollThreshold = scrollLength - containerLength
const scrollThreshold = Math.floor(scrollLength - containerLength)

let current = 0
let disableScroll = true
let disableScroll = false
let firstRun = true

const onScroll = () => {
// Prevent first scroll because it is indirectly caused by the one pixel offset
if (!enabled || firstRun) return

if (disableScrollUpdate.current) {
disableScrollUpdate.current = false
return
}

invalidate()
current = el[horizontal ? 'scrollLeft' : 'scrollTop']
scroll.current = current / scrollThreshold

if (infinite) {
if (!disableScroll) {
if (current >= scrollThreshold) {
if (current >= scrollThreshold - 1) {
const damp = 1 - state.offset
el[horizontal ? 'scrollLeft' : 'scrollTop'] = 1
scroll.current = state.offset = -damp
disableScroll = true
} else if (current <= 0) {
const damp = 1 + state.offset
el[horizontal ? 'scrollLeft' : 'scrollTop'] = scrollLength
el[horizontal ? 'scrollLeft' : 'scrollTop'] = scrollThreshold - 1
scroll.current = state.offset = damp
disableScroll = true
}
Expand All @@ -194,12 +201,38 @@ export function ScrollControls({
el.addEventListener('scroll', onScroll, { passive: true })
requestAnimationFrame(() => (firstRun = false))

const onWheel = (e) => (el.scrollLeft += e.deltaY / 2)
if (horizontal) el.addEventListener('wheel', onWheel, { passive: true })
const onResize = () => {
if (!el) return

const scrollLength = el[horizontal ? 'scrollWidth' : 'scrollHeight']

disableScrollUpdate.current = true
el.scrollLeft = state.offset * (scrollLength - el.clientWidth)
}

const onWheel = (e) => {
if (horizontal) {
const previous = el.scrollLeft
el.scrollLeft += e.deltaY / 2
if (infinite && previous == el.scrollLeft) {
onScroll()
}
} else if (infinite) {
if (el.scrollTop <= 1 && e.deltaY < 0) {
onScroll()
} else if (el.scrollTop >= el.scrollHeight - el.clientHeight - 1 && e.deltaY > 0) {
onScroll()
}
}
}
if (horizontal || infinite) el.addEventListener('wheel', onWheel, { passive: true })

if (horizontal) window.addEventListener('resize', onResize)

return () => {
el.removeEventListener('scroll', onScroll)
if (horizontal) el.removeEventListener('wheel', onWheel)
if (horizontal || infinite) el.removeEventListener('wheel', onWheel)
if (horizontal) window.removeEventListener('resize', onResize)
}
}
}, [el, events, size, infinite, state, invalidate, horizontal, enabled])
Expand Down