From 50e8b45479f633304b9d725a007c7e7f628f9ae1 Mon Sep 17 00:00:00 2001
From: Sergio Tamayo <you@example.com>
Date: Mon, 16 Mar 2026 12:09:18 -0500
Subject: [PATCH] Perf: Make scroll event listeners passive

---
 assets/header.js       |  2 +-
 assets/localization.js |  4 ++--
 assets/scrolling.js    | 32 ++++++++++++++++----------------
 assets/zoom-dialog.js  |  4 ++--
 4 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/assets/header.js b/assets/header.js
index a67565c26..90cab5a2b 100644
--- a/assets/header.js
+++ b/assets/header.js
@@ -192,7 +192,7 @@ class HeaderComponent extends Component {
       this.#observeStickyPosition(stickyMode === 'always');
 
       if (stickyMode === 'scroll-up' || stickyMode === 'always') {
-        document.addEventListener('scroll', this.#handleWindowScroll);
+        document.addEventListener('scroll', this.#handleWindowScroll, { passive: true });
       }
     }
   }
diff --git a/assets/localization.js b/assets/localization.js
index 6d47cbb96..e21cd5495 100644
--- a/assets/localization.js
+++ b/assets/localization.js
@@ -24,7 +24,7 @@ class LocalizationFormComponent extends Component {
 
     this.refs.search && this.refs.search.addEventListener('keydown', this.#onSearchKeyDown);
     this.refs.countryList && this.refs.countryList.addEventListener('keydown', this.#onContainerKeyDown);
-    this.refs.countryList && this.refs.countryList.addEventListener('scroll', this.#onCountryListScroll);
+    this.refs.countryList && this.refs.countryList.addEventListener('scroll', this.#onCountryListScroll, { passive: true });
 
     // Resizing the language input can be expensive for browsers that don't support field-sizing: content.
     // Spliting it into separate tasks at least helps when there are multiple localization forms on the page.
@@ -515,7 +515,7 @@ class DrawerLocalizationComponent extends Component {
     const countryList = localizationForm.querySelector('.country-selector-form__wrapper');
 
     if (target.open) {
-      if (countryList) countryList.addEventListener('scroll', this.#onCountryListScroll);
+      if (countryList) countryList.addEventListener('scroll', this.#onCountryListScroll, { passive: true });
       onAnimationEnd(target, localizationForm.focusSearchInput);
     } else {
       countryList?.removeEventListener('scroll', this.#onCountryListScroll);
diff --git a/assets/scrolling.js b/assets/scrolling.js
index 57739db13..db39e6e1a 100644
--- a/assets/scrolling.js
+++ b/assets/scrolling.js
@@ -89,7 +89,7 @@ export class Scroller {
     this.#onScrollEnd = options.onScrollEnd;
 
     this.element = element;
-    this.element.addEventListener('scroll', this.#handleScroll);
+    this.element.addEventListener('scroll', this.#handleScroll, { passive: true });
   }
 
   /**
@@ -342,25 +342,25 @@ export function scrollIntoView(element, { ancestor, behavior = 'smooth', block =
   const scrollTop =
     ancestor.scrollHeight > ancestor.clientHeight
       ? calculateScrollOffset(
-          block,
-          ancestorRect.top,
-          ancestor.clientHeight,
-          elemRect.top,
-          elemRect.height,
-          ancestor.scrollTop
-        )
+        block,
+        ancestorRect.top,
+        ancestor.clientHeight,
+        elemRect.top,
+        elemRect.height,
+        ancestor.scrollTop
+      )
       : ancestor.scrollTop;
 
   const scrollLeft =
     ancestor.scrollWidth > ancestor.clientWidth
       ? calculateScrollOffset(
-          inline,
-          ancestorRect.left,
-          ancestor.clientWidth,
-          elemRect.left,
-          elemRect.width,
-          ancestor.scrollLeft
-        )
+        inline,
+        ancestorRect.left,
+        ancestor.clientWidth,
+        elemRect.left,
+        elemRect.width,
+        ancestor.scrollLeft
+      )
       : ancestor.scrollLeft;
 
   ancestor.scrollTo({ top: scrollTop, left: scrollLeft, behavior });
@@ -372,7 +372,7 @@ class ScrollHint extends HTMLElement {
   #rafId = null;
 
   connectedCallback() {
-    this.addEventListener('scroll', this.#handleScroll);
+    this.addEventListener('scroll', this.#handleScroll, { passive: true });
     this.#resizeObserver.observe(this);
   }
 
diff --git a/assets/zoom-dialog.js b/assets/zoom-dialog.js
index acdff63ed..8fa54e27f 100644
--- a/assets/zoom-dialog.js
+++ b/assets/zoom-dialog.js
@@ -28,7 +28,7 @@ export class ZoomDialog extends Component {
 
   connectedCallback() {
     super.connectedCallback();
-    this.refs.dialog.addEventListener('scroll', this.handleScroll);
+    this.refs.dialog.addEventListener('scroll', this.handleScroll, { passive: true });
   }
 
   disconnectedCallback() {
@@ -275,7 +275,7 @@ function getMostVisibleElement(elements) {
           current.intersectionRatio > prev.intersectionRatio ? current : prev
         );
         observer.disconnect();
-        resolve(/** @type {HTMLElement} */ (mostVisible.target));
+        resolve(/** @type {HTMLElement} */(mostVisible.target));
       },
       {
         threshold: Array.from({ length: 100 }, (_, i) => i / 100),