Skip to content

fix(Carousel): more responsive scroll for vertical orientation #203

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

Merged
johnleider merged 2 commits into from
Apr 21, 2026
Merged

fix(Carousel): more responsive scroll for vertical orientation #203

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d065daa
fix(Carousel): more responsive scroll for vertical orientation
J-Sek Apr 21, 2026
f1917fa
refactor(Carousel): hoist isVertical and simplify slideStep branching
johnleider Apr 21, 2026
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
51 changes: 24 additions & 27 deletions packages/0/src/components/Carousel/CarouselViewport.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,7 @@
} = defineProps<CarouselViewportProps>()

const carousel = useCarouselRoot(namespace)
const isVertical = toRef(() => carousel.orientation.value === 'vertical')

const isDragging = shallowRef(false)
const syncing = shallowRef(false)
Expand All @@ -79,15 +80,18 @@
const ticket = carousel.parts.register({ type: 'viewport', el })
onBeforeUnmount(() => ticket.unregister())

const { width } = useElementSize(el)
const { width, height } = useElementSize(el)

const slideStep = toRef(() => {
if (!el.value || width.value === 0) return 0
if (!el.value) return 0
if ((isVertical.value ? height.value : width.value) === 0) return 0

const first = toValue((carousel.seek('first') as CarouselTicket | undefined)?.el) as HTMLElement | undefined
const second = toValue((carousel.seek('first', 1) as CarouselTicket | undefined)?.el) as HTMLElement | undefined

if (!first) return 0
if (!second) return first.offsetWidth
return second.offsetLeft - first.offsetLeft
if (!second) return isVertical.value ? first.offsetHeight : first.offsetWidth
return isVertical.value ? second.offsetTop - first.offsetTop : second.offsetLeft - first.offsetLeft
})

if (IN_BROWSER) {
Expand All @@ -102,8 +106,7 @@

isDragging.value = false

const isVertical = carousel.orientation.value === 'vertical'
const scrollPos = isVertical ? viewport.scrollTop : viewport.scrollLeft
const scrollPos = isVertical.value ? viewport.scrollTop : viewport.scrollLeft
const snapIndex = Math.round(scrollPos / slideStep.value)
const id = carousel.lookup(snapIndex)

Expand All @@ -118,18 +121,18 @@
}
})

let lastShiftWheel = 0
let lastWheel = 0

useEventListener(el, 'wheel', (e: WheelEvent) => {
if (!e.shiftKey) return
if (e.shiftKey === isVertical.value) return
const delta = e.deltaY || e.deltaX
if (delta === 0) return

e.preventDefault()

const now = performance.now()
if (now - lastShiftWheel < 300) return
lastShiftWheel = now
if (now - lastWheel < 300) return
lastWheel = now

if (delta > 0) carousel.next()
else carousel.prev()
Expand All @@ -144,9 +147,8 @@
if (!viewport) return

carousel.pause()
const isVertical = carousel.orientation.value === 'vertical'
dragStart = isVertical ? e.clientY : e.clientX
scrollStart = isVertical ? viewport.scrollTop : viewport.scrollLeft
dragStart = isVertical.value ? e.clientY : e.clientX
scrollStart = isVertical.value ? viewport.scrollTop : viewport.scrollLeft
snapDisabled.value = true
})

Expand All @@ -156,11 +158,10 @@
if (!viewport) return
e.preventDefault()

const isVertical = carousel.orientation.value === 'vertical'
const pos = isVertical ? e.clientY : e.clientX
const pos = isVertical.value ? e.clientY : e.clientX
const delta = pos - dragStart

if (isVertical) {
if (isVertical.value) {
viewport.scrollTop = scrollStart - delta
} else {
viewport.scrollLeft = scrollStart - delta
Expand All @@ -177,14 +178,13 @@
return
}

const isVertical = carousel.orientation.value === 'vertical'
const scrollPos = isVertical ? viewport.scrollTop : viewport.scrollLeft
const scrollPos = isVertical.value ? viewport.scrollTop : viewport.scrollLeft
const snapIndex = Math.round(scrollPos / slideStep.value)
const position = snapIndex * slideStep.value

syncing.value = true
viewport.scrollTo({
[isVertical ? 'top' : 'left']: position,
[isVertical.value ? 'top' : 'left']: position,
behavior: carousel.behavior.value,
})

Expand Down Expand Up @@ -214,24 +214,21 @@

syncing.value = true

const isVertical = carousel.orientation.value === 'vertical'
const position = index * slideStep.value

viewport.scrollTo({
[isVertical ? 'top' : 'left']: position,
[isVertical.value ? 'top' : 'left']: position,
behavior: carousel.behavior.value,
})
})

const viewportStyle = toRef(() => {
const isVertical = carousel.orientation.value === 'vertical'

return {
'display': 'flex',
'flex-direction': isVertical ? 'column' : 'row',
[isVertical ? 'overflow-y' : 'overflow-x']: 'auto',
[isVertical ? 'overflow-x' : 'overflow-y']: 'hidden',
'scroll-snap-type': snapDisabled.value ? 'none' : `${isVertical ? 'y' : 'x'} mandatory`,
'flex-direction': isVertical.value ? 'column' : 'row',
[isVertical.value ? 'overflow-y' : 'overflow-x']: 'auto',
[isVertical.value ? 'overflow-x' : 'overflow-y']: 'hidden',
'scroll-snap-type': snapDisabled.value ? 'none' : `${isVertical.value ? 'y' : 'x'} mandatory`,
'scrollbar-width': 'none',
...(snapDisabled.value ? { 'user-select': 'none' } : {}),
} as Record<string, string | number>
Expand Down
Loading