Optimize isScrollable() (#2755)

* Take advantage of short-circuiting to avoid calling getComputedStyle on non-scrollable elements. * Add changeset. * Update .changeset/nervous-apricots-search.md Co-authored-by: Josh Black <joshblack@github.com> Co-authored-by: Josh Black <joshblack@github.com>
primer · Jan 10, 2023 · dd1e5ce · dd1e5ce
1 parent dcb51c6
commit dd1e5ce
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/.changeset/nervous-apricots-search.md b/.changeset/nervous-apricots-search.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Update `isScrollable` utility to only run `getComputedStyle` on scrollable content.
diff --git a/src/utils/scroll.ts b/src/utils/scroll.ts
@@ -14,8 +14,5 @@ export function getScrollContainer(element: Element | null): Element | null {
 function isScrollable(element: Element) {
   const hasScrollableContent = element.scrollHeight > element.clientHeight
 
-  const overflowYStyle = window.getComputedStyle(element).overflowY
-  const isOverflowHidden = overflowYStyle.indexOf('hidden') !== -1
-
-  return hasScrollableContent && !isOverflowHidden
+  return hasScrollableContent && !(window.getComputedStyle(element).overflowY.indexOf('hidden') !== -1)
 }