Merge branch 'main' into use-window-scroll-setter

vueuse · Aug 7, 2022 · 3372b1d · 3372b1d
2 parents 6b9130c + 53a209e
commit 3372b1d
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 6 deletions.
diff --git 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()
 })
 </script>
 

diff --git a/packages/core/useScroll/index.ts b/packages/core/useScroll/index.ts
@@ -58,6 +58,14 @@ export interface UseScrollOptions {
   behavior?: MaybeComputedRef<ScrollBehavior>
 }
 
+/**
+ * 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