diff --git a/packages/core/onKeyStroke/demo.vue b/packages/core/onKeyStroke/demo.vue index c3b0c0b22b4..88e1d1d9b01 100644 --- a/packages/core/onKeyStroke/demo.vue +++ b/packages/core/onKeyStroke/demo.vue @@ -7,22 +7,18 @@ const translateY = ref(0) onKeyStroke(['w', 'W', 'ArrowUp'], (e: KeyboardEvent) => { translateY.value -= 10 - e.preventDefault() }) onKeyStroke(['s', 'S', 'ArrowDown'], (e: KeyboardEvent) => { translateY.value += 10 - e.preventDefault() }) onKeyStroke(['a', 'A', 'ArrowLeft'], (e: KeyboardEvent) => { translateX.value -= 10 - e.preventDefault() }) onKeyStroke(['d', 'D', 'ArrowRight'], (e: KeyboardEvent) => { translateX.value += 10 - e.preventDefault() }) diff --git a/packages/core/useScroll/index.ts b/packages/core/useScroll/index.ts index 8fd04a92f0b..88ddc72f3c5 100644 --- a/packages/core/useScroll/index.ts +++ b/packages/core/useScroll/index.ts @@ -58,6 +58,14 @@ export interface UseScrollOptions { behavior?: MaybeComputedRef } +/** + * We have to check if the scroll amount is close enough to some threshold in order to + * more accurately calculate arrivedState. This is because scrollTop/scrollLeft are non-rounded + * numbers, while scrollHeight/scrollWidth and clientHeight/clientWidth are rounded. + * https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#determine_if_an_element_has_been_totally_scrolled + */ +const ARRIVED_STATE_THRESHOLD_PIXELS = 1 + /** * Reactive scroll. * @@ -157,7 +165,7 @@ export function useScroll( directions.right = scrollLeft > internalY.value arrivedState.left = scrollLeft <= 0 + (offset.left || 0) arrivedState.right - = scrollLeft + eventTarget.clientWidth >= eventTarget.scrollWidth - (offset.right || 0) + = scrollLeft + eventTarget.clientWidth >= eventTarget.scrollWidth - (offset.right || 0) - ARRIVED_STATE_THRESHOLD_PIXELS internalX.value = scrollLeft let scrollTop = eventTarget.scrollTop @@ -170,7 +178,7 @@ export function useScroll( directions.bottom = scrollTop > internalY.value arrivedState.top = scrollTop <= 0 + (offset.top || 0) arrivedState.bottom - = scrollTop + eventTarget.clientHeight >= eventTarget.scrollHeight - (offset.bottom || 0) + = scrollTop + eventTarget.clientHeight >= eventTarget.scrollHeight - (offset.bottom || 0) - ARRIVED_STATE_THRESHOLD_PIXELS internalY.value = scrollTop isScrolling.value = true