handy-scroll 1.1.5 → 2.0.1

package/README.md

@@ -1,132 +1,75 @@
 # handy-scroll
 
-Handy dependency-free floating scrollbar widget
+Handy dependency-free floating scrollbar web component.
 
 ## Synopsis
 
-handy-scroll is a dependency-free module which can be used to solve the problem of scrolling some lengthy containers horizontally when those containers don’t fit into the viewport. The widget is just a scrollbar which is attached at the bottom of the container’s visible area. It doesn’t get out of sight when the page is scrolled, thereby making horizontal scrolling of the container much handier.
+handy-scroll is a dependency-free web component which can be used to solve the problem of scrolling lengthy containers horizontally when those containers don’t fit into the viewport. The component is just a scrollbar which is attached at the bottom of the container’s visible area. It doesn’t get out of sight when the page is scrolled, thereby making horizontal scrolling of the container much handier.
 
-> [!TIP]
-> * If you are rather looking for a jQuery plugin with the same functionality, please check out the sibling project [floating-scroll](https://github.com/Amphiluke/floating-scroll) instead.
-> * Developing a Vue.js-based app? Consider using the [vue-handy-scroll](https://github.com/Amphiluke/vue-handy-scroll) component.
+> [!NOTE]
+> Current version of the component targets modern browsers only. If you need to support older browser versions, please stick to the former implementation [handy-scroll@1.x](https://github.com/Amphiluke/handy-scroll/tree/v1).
 
-## Usage
+## Installation and import
 
-The widget requires the CSS file [handy-scroll.css](dist/handy-scroll.css) to be included on the page (you may also import it in your CSS/LESS files). The module script file [handy-scroll.min.js](dist/handy-scroll.min.js) may be added on the web page either via a separate `<script>` element, or it may be loaded by any AMD/CommonJS compatible module loader.
+If you use a bundler in your project, install handy-scroll as a dependency:
 
-:bulb: **Tip:** If you don’t care about supporting Internet Explorer, feel free to use the file [handy-scroll.es6.min.js](dist/handy-scroll.es6.min.js), which is de facto the same as handy-scroll.min.js but is written in ES6, and is a bit smaller.
-
-The handy-scroll package is available on npm, so you may add it to your project as usual:
-
-```
+```shell
 npm install handy-scroll
 ```
 
-## Details & API
-
-The module exports a single object `handyScroll` which provides the following methods:
-
-* [`mount`](#mounting-the-widget) — initializes and “mounts” the widgets in the specified containers;
-* [`mounted`](#checking-widget-existence) — checks if the widget is already mounted in the given container;
-* [`update`](#updating-scrollbar) — updates the widget parameters and position;
-* [`destroy`](#destroying-the-widget) — destroys the widgets mounted in the specified containers and removes all related event handlers;
-* [`destroyDetached`](#destroying-detached-widgets) — destroys handy-scroll widget instances whose containers were removed from the document.
-
-### Mounting the widget
-
-The only thing required to attach the widget to a static container (whose sizes will never change during the session) is a single call of the `handyScroll.mount()` method. The method expects a single argument, the target containers reference, which can be either an element, or a list of elements, or a selector.
+Now you may import it wherever it’s needed:
 
 ```javascript
-// mount widget in the specified container element
-handyScroll.mount(document.getElementById("spacious-container"));
-
-// mount widgets in all the container elements in the collection
-handyScroll.mount(document.getElementsByClassName("spacious-container"));
-handyScroll.mount([myDOMElement1, myDOMElement2, myDOMElement3]);
-
-// mount widgets in all the container elements matching the selector
-handyScroll.mount(".examples > .spacious-container");
+import "handy-scroll";
 ```
 
-### Auto-initialisation
-
-There is another way to mount the handy-scroll widget without writing a single line of JavaScript code. Just add the attribute `data-handy-scroll` to the desired containers. As the DOM is ready the module will detect all such elements and will mount widgets automatically.
+If you don’t use bundlers, just import the component as a module in your HTML files:
 
 ```html
-<div class="spacious-container" data-handy-scroll>
-    <!-- Horizontally wide contents -->
-</div>
+<script type="module" src="https://esm.run/handy-scroll"></script>
 ```
 
-### Checking widget existence
+## Standard usage
 
-You may check if the widget is already mounted in the given container by calling the `handyScroll.mounted()` method.
+Drop the custom element `<handy-scroll>` where you need in your markup and link the component to the horizontally-scrollable target using the `owner` attribute:
 
-```javascript
-handyScroll.mount("#spacious-container");
-console.log(handyScroll.mounted("#spacious-container")); // true
-```
-
-### Updating scrollbar
-
-If you mount the widget in a container whose size and/or content may dynamically change, you need a way to update the scrollbar each time the container’s sizes change. This can be done by invoking the method `handyScroll.update()` as in the example below.
-
-```javascript
-handyScroll.mount(".spacious-container");
-// ... some actions which change the total scroll width of the container ...
-handyScroll.update(".spacious-container");
+```html
+<div id="horizontally-scrollable">
+  <!-- Horizontally wide contents -->
+</div>
+<handy-scroll owner="horizontally-scrollable"></handy-scroll>
 ```
 
-The method expects a single argument, the target containers reference, which can be either an element, or a list of elements, or a selector.
-
-### Destroying the widget
+## Custom viewport element
 
-To unmount the widget and remove all related event handlers, use the method `handyScroll.destroy()` as follows:
+Standard use case above implies that handy-scroll will stick to the bottom of the browser window viewport. If instead you want to attach a floating scrollbar at the bottom of your custom scrollable “viewport” (e.g. a scrollable modal popup), then you need to link the component to your custom viewport element using the `viewport` attribute:
 
-```javascript
-handyScroll.destroy(".spacious-container");
+```html
+<div id="custom-viewport">
+  <div id="horizontally-scrollable">
+    <!-- Horizontally wide contents -->
+  </div>
+  <handy-scroll owner="horizontally-scrollable" viewport="custom-viewport"></handy-scroll>
+</div>
 ```
 
-The method expects a single argument, the target containers reference, which can be either an element, or a list of elements, or a selector.
+## API
 
+### `HandyScroll.prototype.update()`
 
-### Destroying detached widgets
-
-If your app completely re-renders a large portion of DOM where handy-scroll widgets were mounted, actual container references are lost, and therefore you cannot unmount the widgets and perform related cleanup using the `destroy` method. In this case, you may just call the `handyScroll.destroyDetached()` method, and the module will find all “zombie” instances and will destroy them for you.
+handy-scroll automatically tracks viewport changes in order to keep the component’s size, position and visibility in sync with the owner’s metrics. However there can be some cases when you’ll need to trigger the component update programmatically (e.g. after some changes in DOM). To do so, just call the method `update()` on the specific `<handy-scroll>` element:
 
 ```javascript
-handyScroll.mount(".main-view .spacious-container");
-// ... the app re-renders the main view ...
-document.querySelector(".main-view").innerHTML = "...";
-// destroy handy-scroll widgets whose containers are not in the document anymore
-handyScroll.destroyDetached();
+document.getElementById("my-handy-scroll").update();
 ```
 
-### Special cases
-
-If you want to attach the widget to a container living in a positioned box (e.g. a modal popup with `position: fixed`) then you need to apply two special indicating class names in the markup. The module detects these indicating class names (they are prefixed with `handy-scroll-`) and switches to a special functioning mode.
-
-```html
-<div class="handy-scroll-viewport"><!-- (1) -->
-    <div class="handy-scroll-body"><!-- (2) -->
-        <div class="spacious-container">
-            <!-- Horizontally wide contents -->
-        </div>
-    </div>
-</div>
-```
-
-The `.handy-scroll-viewport` element (1) is a positioned block (with any type of positioning except `static`) which serves for correct positioning of the widget. Note that this element itself should _not_ be scrollable. The `.handy-scroll-body` element (2) is a vertically scrollable block (with `overflow: auto`) which encloses the target container the widget is mounted in. After applying these special class names, you may initialise the widget as usual:
-
-```javascript
-handyScroll.mount(".spacious-container");
-```
+### `HandyScroll.prototype.owner`
 
-The [handy-scroll.css](dist/handy-scroll.css) file provides some basic styles for elements with classes `.handy-scroll-viewport` and `.handy-scroll-body`. Feel free to adjust their styles in your stylesheets as needed.
+Reflects the value of the `owner` attribute, which in turn should reference the `id` attribute of the horizontally-scrollable container (owner).
 
-### “Unobtrusive” mode
+### `HandyScroll.prototype.viewport`
 
-You can make the widget more “unobtrusive” so that it will appear only when the mouse pointer hovers over the scrollable container. To do so just apply the class `handy-scroll-hoverable` to the desired scrollable container owning the widget.
+Reflects the value of the `viewport` attribute, which (if present) should reference the `id` attribute of the element serving as custom viewport.
 
 ## Live demos
 

package/dist/handy-scroll.d.mts

@@ -0,0 +1,14 @@
+declare class HandyScroll extends HTMLElement {
+  #private;
+  static get observedAttributes(): string[];
+  get owner(): string | null;
+  set owner(ownerId: string);
+  get viewport(): string | null;
+  set viewport(viewportId: string);
+  constructor();
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  attributeChangedCallback(name: string): void;
+  update(): void;
+}
+export default HandyScroll;

package/dist/handy-scroll.mjs

@@ -0,0 +1,124 @@
+/*!
+handy-scroll v2.0.0
+https://amphiluke.github.io/handy-scroll/
+(c) 2024 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]){display:block;position:sticky}:host([viewport]:state(latent)){position:fixed}';
+let h = (n) => `Attribute ‘${n}’ must reference a valid container ‘id’`;
+class r extends HTMLElement {
+  static get observedAttributes() {
+    return ["owner", "viewport"];
+  }
+  #o = null;
+  #t = null;
+  #e = null;
+  #s = null;
+  #i = /* @__PURE__ */ new Map();
+  #n = null;
+  #r = !0;
+  #l = !0;
+  get owner() {
+    return this.getAttribute("owner");
+  }
+  set owner(t) {
+    this.setAttribute("owner", t);
+  }
+  get viewport() {
+    return this.getAttribute("viewport");
+  }
+  set viewport(t) {
+    this.setAttribute("viewport", t);
+  }
+  get #h() {
+    return this.#o.states.has("latent");
+  }
+  set #h(t) {
+    this.#o.states[t ? "add" : "delete"]("latent");
+  }
+  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();
+  }
+  connectedCallback() {
+    this.#a(), this.#c(), this.#u(), this.#f(), this.update();
+  }
+  disconnectedCallback() {
+    this.#w(), this.#p(), this.#e = this.#t = null;
+  }
+  attributeChangedCallback(t) {
+    this.#i.size && (t === "owner" ? this.#a() : t === "viewport" && this.#c(), this.#w(), this.#p(), this.#u(), this.#f(), this.update());
+  }
+  #a() {
+    let t = this.getAttribute("owner");
+    if (this.#e = document.getElementById(t), !this.#e)
+      throw new DOMException(h("owner"));
+  }
+  #c() {
+    if (!this.hasAttribute("viewport")) {
+      this.#t = window;
+      return;
+    }
+    let t = this.getAttribute("viewport");
+    if (this.#t = document.getElementById(t), !this.#t)
+      throw new DOMException(h("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));
+    });
+  }
+  #w() {
+    this.#i.forEach((t, e) => {
+      Object.entries(t).forEach(([i, s]) => e.removeEventListener(i, s, !1));
+    }), this.#i.clear();
+  }
+  #f() {
+    this.#t !== window && (this.#n = new ResizeObserver(([t]) => {
+      t.contentBoxSize?.[0]?.inlineSize && this.update();
+    }), this.#n.observe(this.#t));
+  }
+  #p() {
+    this.#n?.disconnect(), this.#n = null;
+  }
+  #b() {
+    let { scrollLeft: t } = this;
+    this.#e.scrollLeft !== t && (this.#l = !1, this.#e.scrollLeft = t);
+  }
+  #d() {
+    let { scrollLeft: t } = this.#e;
+    this.scrollLeft !== t && (this.#r = !1, this.scrollLeft = t);
+  }
+  #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;
+    }
+    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();
+  }
+}
+customElements.define("handy-scroll", r);
+export {
+  r as default
+};

package/package.json

@@ -1,29 +1,24 @@
 {
   "name": "handy-scroll",
-  "version": "1.1.5",
-  "description": "Handy dependency-free floating scrollbar widget",
-  "main": "./dist/handy-scroll.min.js",
-  "module": "./src/handy-scroll.js",
-  "style": "./dist/handy-scroll.css",
-  "types": "./dist/handy-scroll.d.ts",
+  "version": "2.0.1",
+  "description": "Handy dependency-free floating scrollbar web component",
   "exports": {
     ".": {
-      "types": "./dist/handy-scroll.d.ts",
-      "import": "./src/handy-scroll.js",
-      "require": "./dist/handy-scroll.js"
-    },
-    "./dist/*.css": "./dist/*.css"
+      "types": "./dist/handy-scroll.d.mts",
+      "import": "./dist/handy-scroll.mjs"
+    }
   },
+  "main": "./dist/handy-scroll.mjs",
   "type": "module",
   "files": [
     "dist",
     "src"
   ],
   "scripts": {
-    "prepare": "husky install",
-    "lint": "eslint src/*.js",
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "rollup -c && lessc src/handy-scroll.less | cleancss -O2 -o dist/handy-scroll.css"
+    "lint": "eslint",
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
   },
   "repository": {
     "type": "git",
@@ -31,7 +26,7 @@
   },
   "keywords": [
     "scrollbar",
-    "widget",
+    "web-component",
     "user-interface"
   ],
   "author": "Amphiluke",
@@ -41,14 +36,10 @@
   },
   "homepage": "https://amphiluke.github.io/handy-scroll/",
   "devDependencies": {
-    "@babel/core": "^7.23.7",
-    "@babel/preset-env": "^7.23.8",
-    "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-terser": "^0.4.4",
-    "clean-css-cli": "^5.6.3",
-    "eslint": "^8.56.0",
-    "husky": "8.0.3",
-    "less": "^4.2.0",
-    "rollup": "^4.9.5"
+    "@eslint/js": "^9.9.1",
+    "@stylistic/eslint-plugin-js": "^2.7.2",
+    "eslint": "^9.9.1",
+    "globals": "^15.9.0",
+    "vite": "^5.4.2"
   }
 }

package/src/handy-scroll.css

@@ -0,0 +1,41 @@
+:host {
+  bottom: 0;
+  min-height: 17px; /* based on https://codepen.io/sambible/post/browser-scrollbar-widths (fixes #3) */
+  overflow: auto;
+  position: fixed;
+}
+
+.strut {
+  height: 1px;
+  overflow: hidden;
+  pointer-events: none;
+
+  &::before {
+    content: "\A0"; /* fixes Amphiluke/floating-scroll#6 */
+  }
+}
+
+:host,
+.strut {
+  font-size: 1px;
+  line-height: 0;
+  margin: 0;
+  padding: 0;
+}
+
+:host(:state(latent)) {
+  bottom: 110vh;
+
+  .strut::before {
+    content: "\A0\A0"; /* changing content fixes eventual bug with widget re-rendering in Chrome */
+  }
+}
+
+:host([viewport]) {
+  display: block;
+  position: sticky;
+}
+
+:host([viewport]:state(latent)) {
+  position: fixed;
+}

package/src/handy-scroll.mjs

@@ -0,0 +1,223 @@
+import css from "./handy-scroll.css?inline";
+
+let getAttributeErrorMessage = (attribute) => `Attribute ‘${attribute}’ must reference a valid container ‘id’`;
+
+class HandyScroll extends HTMLElement {
+  static get observedAttributes() {
+    return ["owner", "viewport"];
+  }
+
+  #internals = null;
+
+  #viewport = null;
+  #owner = null;
+  #strut = null;
+
+  #eventHandlers = new Map();
+  #resizeObserver = null;
+
+  #syncingOwner = true;
+  #syncingComponent = true;
+
+  get owner() {
+    return this.getAttribute("owner");
+  }
+  set owner(ownerId) {
+    this.setAttribute("owner", ownerId);
+  }
+
+  get viewport() {
+    return this.getAttribute("viewport");
+  }
+  set viewport(viewportId) {
+    this.setAttribute("viewport", viewportId);
+  }
+
+  get #isLatent() {
+    return this.#internals.states.has("latent");
+  }
+  set #isLatent(value) {
+    this.#internals.states[value ? "add" : "delete"]("latent");
+  }
+
+  constructor() {
+    super();
+    let shadowRoot = this.attachShadow({mode: "open"});
+
+    let style = document.createElement("style");
+    style.textContent = css;
+    shadowRoot.appendChild(style);
+
+    this.#strut = document.createElement("div");
+    this.#strut.classList.add("strut");
+    shadowRoot.appendChild(this.#strut);
+
+    this.#internals = this.attachInternals();
+  }
+
+  connectedCallback() {
+    this.#bindOwner();
+    this.#bindViewport();
+    this.#addEventHandlers();
+    this.#addResizeObserver();
+    this.update();
+  }
+
+  disconnectedCallback() {
+    this.#removeEventHandlers();
+    this.#removeResizeObserver();
+    this.#owner = this.#viewport = null;
+  }
+
+  attributeChangedCallback(name) {
+    if (!this.#eventHandlers.size) { // handle only dynamic changes when the element is completely connected
+      return;
+    }
+    if (name === "owner") {
+      this.#bindOwner();
+    } else if (name === "viewport") {
+      this.#bindViewport();
+    }
+    this.#removeEventHandlers();
+    this.#removeResizeObserver();
+    this.#addEventHandlers();
+    this.#addResizeObserver();
+    this.update();
+  }
+
+  #bindOwner() {
+    let ownerId = this.getAttribute("owner");
+    this.#owner = document.getElementById(ownerId);
+    if (!this.#owner) {
+      throw new DOMException(getAttributeErrorMessage("owner"));
+    }
+  }
+
+  #bindViewport() {
+    if (!this.hasAttribute("viewport")) {
+      this.#viewport = window;
+      return;
+    }
+    let viewportId = this.getAttribute("viewport");
+    this.#viewport = document.getElementById(viewportId);
+    if (!this.#viewport) {
+      throw new DOMException(getAttributeErrorMessage("viewport"));
+    }
+  }
+
+  #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.#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));
+    });
+  }
+
+  #removeEventHandlers() {
+    this.#eventHandlers.forEach((handlers, el) => {
+      Object.entries(handlers).forEach(([event, handler]) => el.removeEventListener(event, handler, false));
+    });
+    this.#eventHandlers.clear();
+  }
+
+  #addResizeObserver() {
+    if (this.#viewport === window) {
+      return;
+    }
+    this.#resizeObserver = new ResizeObserver(([entry]) => {
+      if (entry.contentBoxSize?.[0]?.inlineSize) {
+        this.update();
+      }
+    });
+    this.#resizeObserver.observe(this.#viewport);
+  }
+
+  #removeResizeObserver() {
+    this.#resizeObserver?.disconnect();
+    this.#resizeObserver = null;
+  }
+
+  #syncOwner() {
+    let {scrollLeft} = this;
+    if (this.#owner.scrollLeft !== scrollLeft) {
+      // Prevents owner’s “scroll” event handler from syncing back again the component’s scroll position
+      this.#syncingComponent = false;
+      // Note that this makes owner’s “scroll” event handlers execute
+      this.#owner.scrollLeft = scrollLeft;
+    }
+  }
+
+  #syncComponent() {
+    let {scrollLeft} = this.#owner;
+    if (this.scrollLeft !== scrollLeft) {
+      // Prevents component’s “scroll” event handler from syncing back again the owner’s scroll position
+      this.#syncingOwner = false;
+      // Note that this makes component’s “scroll” event handlers execute
+      this.scrollLeft = scrollLeft;
+    }
+  }
+
+  #recheckLatency() {
+    let isLatent = this.scrollWidth <= this.offsetWidth;
+    if (!isLatent) {
+      let ownerRect = this.#owner.getBoundingClientRect();
+      let maxVisibleY = (this.#viewport === window) ?
+        window.innerHeight || document.documentElement.clientHeight :
+        this.#viewport.getBoundingClientRect().bottom;
+      isLatent = ((ownerRect.bottom <= maxVisibleY) || (ownerRect.top > maxVisibleY));
+    }
+    if (this.#isLatent !== isLatent) {
+      this.#isLatent = isLatent;
+    }
+  }
+
+  update() {
+    let {clientWidth, scrollWidth} = this.#owner;
+    let {style} = this;
+    style.width = `${clientWidth}px`;
+    if (this.#viewport === window) {
+      style.left = `${this.#owner.getBoundingClientRect().left}px`;
+    }
+    this.#strut.style.width = `${scrollWidth}px`;
+    // Fit component height to the native scroll bar height if needed
+    if (scrollWidth > clientWidth) {
+      style.height = `${this.offsetHeight - this.clientHeight + 1}px`; // +1px JIC
+    }
+    this.#syncComponent();
+    this.#recheckLatency(); // fixes issue Amphiluke/floating-scroll#2
+  }
+}
+
+customElements.define("handy-scroll", HandyScroll);
+
+export default HandyScroll;

package/dist/handy-scroll.css

@@ -1 +0,0 @@
-.handy-scroll{bottom:0;min-height:17px;overflow:auto;position:fixed}.handy-scroll div{height:1px;overflow:hidden;pointer-events:none}.handy-scroll div:before{content:"\A0"}.handy-scroll,.handy-scroll div{font-size:1px;line-height:0;margin:0;padding:0}.handy-scroll-hidden{bottom:9999px}.handy-scroll-hidden div:before{content:"\A0\A0"}.handy-scroll-viewport{position:relative}.handy-scroll-body{overflow:auto}.handy-scroll-viewport .handy-scroll{left:0;position:absolute}.handy-scroll-hoverable .handy-scroll{opacity:0;transition:opacity .5s .3s}.handy-scroll-hoverable:hover .handy-scroll{opacity:1}

package/dist/handy-scroll.d.ts

@@ -1,10 +0,0 @@
-declare namespace handyScroll {
-    export function mount(containerRef: HTMLElement | NodeList | HTMLCollection | HTMLElement[] | string): void;
-    export function mounted(containerRef: HTMLElement | string): boolean;
-    export function update(containerRef: HTMLElement | NodeList | HTMLCollection | HTMLElement[] | string): void;
-    export function destroy(containerRef: HTMLElement | NodeList | HTMLCollection | HTMLElement[] | string): void;
-    export function destroyDetached(): void;
-}
-
-export default handyScroll;
-export as namespace handyScroll;