handy-scroll 2.0.2 → 2.0.4

package/dist/handy-scroll.mjs

@@ -1,10 +1,11 @@
 /*!
-handy-scroll v2.0.2
+handy-scroll v2.0.4
 https://amphiluke.github.io/handy-scroll/
-(c) 2024 Amphiluke
+(c) 2025 Amphiluke
 */
-const o = ':host{bottom:0;min-height:17px;overflow:auto;position:fixed}.strut{height:1px;overflow:hidden;pointer-events:none;&:before{content:" "}}:host,.strut{font-size:1px;line-height:0;margin:0;padding:0}:host(:state(latent)){bottom:110vh;.strut:before{content:"  "}}:host([viewport]:not([hidden])){display:block}:host([viewport]){position:sticky}:host([viewport]:state(latent)){position:fixed}';
-let h = (n) => `Attribute ‘${n}’ must reference a valid container ‘id’`;
+const o = ':host{bottom:0;min-height:17px;overflow:auto;position:fixed}.strut{height:1px;overflow:hidden;pointer-events:none;&:before{content:" "}}:host,.strut{font-size:1px;line-height:0;margin:0;padding:0}:host(:state(latent)){bottom:110vh;.strut:before{content:"  "}}:host([viewport]:not([hidden])){display:block}:host([viewport]){position:sticky}:host([viewport]:state(latent)){position:fixed}', h = new CSSStyleSheet();
+h.replaceSync(o);
+let n = (s) => `Attribute ‘${s}’ must reference a valid container ‘id’`;
 class r extends HTMLElement {
   static get observedAttributes() {
     return ["owner", "viewport", "hidden"];
@@ -13,7 +14,7 @@ class r extends HTMLElement {
   #t = null;
   #e = null;
   #s = null;
-  #i = /* @__PURE__ */ new Map();
+  #i = null;
   #n = null;
   #r = !0;
   #l = !0;
@@ -37,28 +38,28 @@ class r extends HTMLElement {
   }
   constructor() {
     super();
-    let t = this.attachShadow({ mode: "open" }), e = document.createElement("style");
-    e.textContent = o, t.appendChild(e), this.#s = document.createElement("div"), this.#s.classList.add("strut"), t.appendChild(this.#s), this.#o = this.attachInternals();
+    let t = this.attachShadow({ mode: "open" });
+    t.adoptedStyleSheets = [h], this.#s = document.createElement("div"), this.#s.classList.add("strut"), t.appendChild(this.#s), this.#o = this.attachInternals();
   }
   connectedCallback() {
-    this.#a(), this.#c(), this.#u(), this.#f(), this.update();
+    this.#a(), this.#c(), this.#u(), this.#p(), this.update();
   }
   disconnectedCallback() {
-    this.#w(), this.#p(), this.#e = this.#t = null;
+    this.#w(), this.#f(), this.#e = this.#t = null;
   }
   attributeChangedCallback(t) {
-    if (this.#i.size) {
+    if (this.#i) {
       if (t === "hidden") {
         this.hasAttribute("hidden") || this.update();
         return;
       }
-      t === "owner" ? this.#a() : t === "viewport" && this.#c(), this.#w(), this.#p(), this.#u(), this.#f(), this.update();
+      t === "owner" ? this.#a() : t === "viewport" && this.#c(), this.#w(), this.#f(), this.#u(), this.#p(), this.update();
     }
   }
   #a() {
     let t = this.getAttribute("owner");
     if (this.#e = document.getElementById(t), !this.#e)
-      throw new DOMException(h("owner"));
+      throw new DOMException(n("owner"));
   }
   #c() {
     if (!this.hasAttribute("viewport")) {
@@ -67,40 +68,30 @@ class r extends HTMLElement {
     }
     let t = this.getAttribute("viewport");
     if (this.#t = document.getElementById(t), !this.#t)
-      throw new DOMException(h("viewport"));
+      throw new DOMException(n("viewport"));
   }
   #u() {
-    this.#i.set(this.#t, {
-      scroll: () => this.#v(),
-      ...this.#t === window ? { resize: () => this.update() } : {}
-    }), this.#i.set(this, {
-      scroll: () => {
-        this.#r && !this.#h && this.#b(), this.#r = !0;
-      }
-    }), this.#i.set(this.#e, {
-      scroll: () => {
-        this.#l && this.#d(), this.#l = !0;
-      },
-      focusin: () => {
-        setTimeout(() => {
-          this.isConnected && this.#d();
-        }, 0);
-      }
-    }), this.#i.forEach((t, e) => {
-      Object.entries(t).forEach(([i, s]) => e.addEventListener(i, s, !1));
-    });
+    this.#i = new AbortController();
+    let t = { signal: this.#i.signal };
+    this.#t.addEventListener("scroll", () => this.#v(), t), this.#t === window && this.#t.addEventListener("resize", () => this.update(), t), this.addEventListener("scroll", () => {
+      this.#r && !this.#h && this.#b(), this.#r = !0;
+    }, t), this.#e.addEventListener("scroll", () => {
+      this.#l && this.#d(), this.#l = !0;
+    }, t), this.#e.addEventListener("focusin", () => {
+      setTimeout(() => {
+        this.isConnected && this.#d();
+      }, 0);
+    }, t);
   }
   #w() {
-    this.#i.forEach((t, e) => {
-      Object.entries(t).forEach(([i, s]) => e.removeEventListener(i, s, !1));
-    }), this.#i.clear();
+    this.#i?.abort(), this.#i = null;
   }
-  #f() {
+  #p() {
     this.#t !== window && (this.#n = new ResizeObserver(([t]) => {
       t.contentBoxSize?.[0]?.inlineSize && this.update();
     }), this.#n.observe(this.#t));
   }
-  #p() {
+  #f() {
     this.#n?.disconnect(), this.#n = null;
   }
   #b() {
@@ -114,14 +105,14 @@ class r extends HTMLElement {
   #v() {
     let t = this.scrollWidth <= this.offsetWidth;
     if (!t) {
-      let e = this.#e.getBoundingClientRect(), i = this.#t === window ? window.innerHeight || document.documentElement.clientHeight : this.#t.getBoundingClientRect().bottom;
-      t = e.bottom <= i || e.top > i;
+      let i = this.#e.getBoundingClientRect(), e = this.#t === window ? window.innerHeight || document.documentElement.clientHeight : this.#t.getBoundingClientRect().bottom;
+      t = i.bottom <= e || i.top > e;
     }
     this.#h !== t && (this.#h = t);
   }
   update() {
-    let { clientWidth: t, scrollWidth: e } = this.#e, { style: i } = this;
-    i.width = `${t}px`, this.#t === window && (i.left = `${this.#e.getBoundingClientRect().left}px`), this.#s.style.width = `${e}px`, e > t && (i.height = `${this.offsetHeight - this.clientHeight + 1}px`), this.#d(), this.#v();
+    let { clientWidth: t, scrollWidth: i } = this.#e, { style: e } = this;
+    e.width = `${t}px`, this.#t === window && (e.left = `${this.#e.getBoundingClientRect().left}px`), this.#s.style.width = `${i}px`, i > t && (e.height = `${this.offsetHeight - this.clientHeight + 1}px`), this.#d(), this.#v();
   }
 }
 customElements.define("handy-scroll", r);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "handy-scroll",
-  "version": "2.0.2",
+  "version": "2.0.4",
   "description": "Handy dependency-free floating scrollbar web component",
   "exports": {
     ".": {
@@ -36,10 +36,10 @@
   },
   "homepage": "https://amphiluke.github.io/handy-scroll/",
   "devDependencies": {
-    "@eslint/js": "^9.10.0",
-    "@stylistic/eslint-plugin-js": "^2.8.0",
-    "eslint": "^9.10.0",
-    "globals": "^15.9.0",
-    "vite": "^5.4.5"
+    "@eslint/js": "^9.24.0",
+    "@stylistic/eslint-plugin-js": "^4.2.0",
+    "eslint": "^9.24.0",
+    "globals": "^16.0.0",
+    "vite": "^6.2.5"
   }
 }

package/src/handy-scroll.mjs

@@ -1,5 +1,8 @@
 import css from "./handy-scroll.css?inline";
 
+const stylesheet = new CSSStyleSheet();
+stylesheet.replaceSync(css);
+
 let getAttributeErrorMessage = (attribute) => `Attribute ‘${attribute}’ must reference a valid container ‘id’`;
 
 class HandyScroll extends HTMLElement {
@@ -13,7 +16,7 @@ class HandyScroll extends HTMLElement {
   #owner = null;
   #strut = null;
 
-  #eventHandlers = new Map();
+  #eventController = null;
   #resizeObserver = null;
 
   #syncingOwner = true;
@@ -44,9 +47,7 @@ class HandyScroll extends HTMLElement {
     super();
     let shadowRoot = this.attachShadow({mode: "open"});
 
-    let style = document.createElement("style");
-    style.textContent = css;
-    shadowRoot.appendChild(style);
+    shadowRoot.adoptedStyleSheets = [stylesheet];
 
     this.#strut = document.createElement("div");
     this.#strut.classList.add("strut");
@@ -70,7 +71,7 @@ class HandyScroll extends HTMLElement {
   }
 
   attributeChangedCallback(name) {
-    if (!this.#eventHandlers.size) { // handle only dynamic changes when the element is completely connected
+    if (!this.#eventController) { // handle only dynamic changes when the element is completely connected
       return;
     }
     if (name === "hidden") {
@@ -112,48 +113,44 @@ class HandyScroll extends HTMLElement {
   }
 
   #addEventHandlers() {
-    this.#eventHandlers.set(this.#viewport, {
-      scroll: () => this.#recheckLatency(),
-      ...(this.#viewport === window ? {resize: () => this.update()} : {}),
-    });
-    this.#eventHandlers.set(this, {
-      scroll: () => {
-        if (this.#syncingOwner && !this.#isLatent) {
-          this.#syncOwner();
-        }
-        // Resume component->owner syncing after the component scrolling has finished
-        // (it might be temporally disabled by the owner while syncing the component)
-        this.#syncingOwner = true;
-      },
-    });
-    this.#eventHandlers.set(this.#owner, {
-      scroll: () => {
-        if (this.#syncingComponent) {
+    this.#eventController = new AbortController();
+    let options = {signal: this.#eventController.signal};
+
+    this.#viewport.addEventListener("scroll", () => this.#recheckLatency(), options);
+    if (this.#viewport === window) {
+      this.#viewport.addEventListener("resize", () => this.update(), options);
+    }
+
+    this.addEventListener("scroll", () => {
+      if (this.#syncingOwner && !this.#isLatent) {
+        this.#syncOwner();
+      }
+      // Resume component->owner syncing after the component scrolling has finished
+      // (it might be temporally disabled by the owner while syncing the component)
+      this.#syncingOwner = true;
+    }, options);
+
+    this.#owner.addEventListener("scroll", () => {
+      if (this.#syncingComponent) {
+        this.#syncComponent();
+      }
+      // Resume owner->component syncing after the owner scrolling has finished
+      // (it might be temporally disabled by the component while syncing the owner)
+      this.#syncingComponent = true;
+    }, options);
+    this.#owner.addEventListener("focusin", () => {
+      setTimeout(() => {
+        // The widget might be destroyed before the timer is triggered (issue #14)
+        if (this.isConnected) {
           this.#syncComponent();
         }
-        // Resume owner->component syncing after the owner scrolling has finished
-        // (it might be temporally disabled by the component while syncing the owner)
-        this.#syncingComponent = true;
-      },
-      focusin: () => {
-        setTimeout(() => {
-          // The widget might be destroyed before the timer is triggered (issue #14)
-          if (this.isConnected) {
-            this.#syncComponent();
-          }
-        }, 0);
-      },
-    });
-    this.#eventHandlers.forEach((handlers, el) => {
-      Object.entries(handlers).forEach(([event, handler]) => el.addEventListener(event, handler, false));
-    });
+      }, 0);
+    }, options);
   }
 
   #removeEventHandlers() {
-    this.#eventHandlers.forEach((handlers, el) => {
-      Object.entries(handlers).forEach(([event, handler]) => el.removeEventListener(event, handler, false));
-    });
-    this.#eventHandlers.clear();
+    this.#eventController?.abort();
+    this.#eventController = null;
   }
 
   #addResizeObserver() {