feat(useWindowSize): support includeScrollbar (#2161)

vueuse · Sep 4, 2022 · d278f0b · d278f0b
1 parent 3316e81
commit d278f0b
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 2 deletions.
diff --git a/packages/core/useWindowSize/index.test.ts b/packages/core/useWindowSize/index.test.ts
@@ -23,6 +23,13 @@ describe('useWindowSize', () => {
     expect(height.value).toBe(window.innerHeight)
   })
 
+  it('should exclude scrollbar', () => {
+    const { width, height } = useWindowSize({ initialWidth: 100, initialHeight: 200, includeScrollbar: false })
+
+    expect(width.value).toBe(window.document.documentElement.clientWidth)
+    expect(height.value).toBe(window.document.documentElement.clientHeight)
+  })
+
   it('sets handler for window "resize" event', async () => {
     useWindowSize({ initialWidth: 100, initialHeight: 200, listenOrientation: false })
 

diff --git a/packages/core/useWindowSize/index.ts b/packages/core/useWindowSize/index.ts
@@ -13,6 +13,12 @@ export interface UseWindowSizeOptions extends ConfigurableWindow {
    * @default true
    */
   listenOrientation?: boolean
+
+  /**
+   * Whether the scrollbar should be included in the width and height
+   * @default true
+   */
+  includeScrollbar?: boolean
 }
 
 /**
@@ -27,15 +33,22 @@ export function useWindowSize(options: UseWindowSizeOptions = {}) {
     initialWidth = Infinity,
     initialHeight = Infinity,
     listenOrientation = true,
+    includeScrollbar = true,
   } = options
 
   const width = ref(initialWidth)
   const height = ref(initialHeight)
 
   const update = () => {
     if (window) {
-      width.value = window.innerWidth
-      height.value = window.innerHeight
+      if (includeScrollbar) {
+        width.value = window.innerWidth
+        height.value = window.innerHeight
+      }
+      else {
+        width.value = window.document.documentElement.clientWidth
+        height.value = window.document.documentElement.clientHeight
+      }
     }
   }