@rfkhusnutdinov/scrollbar-width-observer 1.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Rinat Khusnutdinov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,59 @@
+# ScrollbarWidthObserver
+
+A lightweight JavaScript plugin to monitor changes in the scrollbar width.
+Automatically updates a CSS variable and dispatches a `scrollbarwidthchange` event on changes.
+
+## Features
+
+- Observes scrollbar width changes on window resize
+- Updates a CSS variable (default `--scrollbar-width`) with the current width
+- Dispatches a custom `scrollbarwidthchange` event
+- Singleton pattern ensures only one observer instance
+- Debounced resize handling to optimize performance
+
+## Installation
+
+### Install from npm
+
+```bash
+npm install @rfkhusnutdinov/scrollbar-width-observer
+```
+
+```javascript
+import ScrollbarWidthObserver from "@rfkhusnutdinov/scrollbar-width-observer";
+```
+
+### Use ScrollbarWidthObserver from CDN
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/@rfkhusnutdinov/scrollbar-width-observer@latest"></script>
+```
+
+## Usage
+
+```javascript
+const observer = new ScrollbarWidthObserver({
+  cssVariableName: "--scrollbar-width", // optional, default is --scrollbar-width
+});
+
+// Listen for scrollbar width changes
+window.addEventListener("scrollbarwidthchange", (event) => {
+  console.log("Scrollbar width changed to:", event.detail.scrollbarWidth);
+});
+
+// Disconnect observer when no longer needed
+observer.disconnect();
+```
+
+### Notes
+
+- The plugin calculates the scrollbar width using a temporary DOM element.
+- CSS variable is applied to body for easy usage in styles.
+- Singleton pattern ensures only one instance is active at a time.
+
+## API
+
+| Method                                          | Description                                                       |
+| ----------------------------------------------- | ----------------------------------------------------------------- |
+| new ScrollbarWidthObserver({ cssVariableName }) | Initializes the observer or returns the existing instance         |
+| disconnect()                                    | Stops observing, removes CSS variable, and cleans up the instance |

package/dist/js/index.esm.js

@@ -0,0 +1,122 @@
+function _assertClassBrand(e, t, n) {
+  if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n;
+  throw new TypeError("Private element is not present on this object");
+}
+function _checkPrivateRedeclaration(e, t) {
+  if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object");
+}
+function _classCallCheck(a, n) {
+  if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function");
+}
+function _classPrivateFieldGet2(s, a) {
+  return s.get(_assertClassBrand(s, a));
+}
+function _classPrivateFieldInitSpec(e, t, a) {
+  _checkPrivateRedeclaration(e, t), t.set(e, a);
+}
+function _classPrivateFieldSet2(s, a, r) {
+  return s.set(_assertClassBrand(s, a), r), r;
+}
+function _classPrivateMethodInitSpec(e, a) {
+  _checkPrivateRedeclaration(e, a), a.add(e);
+}
+function _defineProperties(e, r) {
+  for (var t = 0; t < r.length; t++) {
+    var o = r[t];
+    o.enumerable = o.enumerable || false, o.configurable = true, "value" in o && (o.writable = true), Object.defineProperty(e, _toPropertyKey(o.key), o);
+  }
+}
+function _createClass(e, r, t) {
+  return r && _defineProperties(e.prototype, r), Object.defineProperty(e, "prototype", {
+    writable: false
+  }), e;
+}
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r);
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (String )(t);
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+
+var _timer = /*#__PURE__*/new WeakMap();
+var _debounceDelay = /*#__PURE__*/new WeakMap();
+var _cssVariableName = /*#__PURE__*/new WeakMap();
+var _onResize = /*#__PURE__*/new WeakMap();
+var _ScrollbarWidthObserver_brand = /*#__PURE__*/new WeakSet();
+var ScrollbarWidthObserver = /*#__PURE__*/function () {
+  function ScrollbarWidthObserver() {
+    var _this = this;
+    var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      _ref$cssVariableName = _ref.cssVariableName,
+      cssVariableName = _ref$cssVariableName === void 0 ? "--scrollbar-width" : _ref$cssVariableName;
+    _classCallCheck(this, ScrollbarWidthObserver);
+    _classPrivateMethodInitSpec(this, _ScrollbarWidthObserver_brand);
+    _classPrivateFieldInitSpec(this, _timer, null);
+    _classPrivateFieldInitSpec(this, _debounceDelay, 50);
+    _classPrivateFieldInitSpec(this, _cssVariableName, void 0);
+    _classPrivateFieldInitSpec(this, _onResize, function () {
+      clearTimeout(_classPrivateFieldGet2(_timer, _this));
+      _classPrivateFieldSet2(_timer, _this, setTimeout(function () {
+        var newWidth = _assertClassBrand(_ScrollbarWidthObserver_brand, _this, _getSystemScrollbarWidth).call(_this);
+        if (newWidth === _this.scrollbarWidth) return;
+        _assertClassBrand(_ScrollbarWidthObserver_brand, _this, _updateScrollbarWidth).call(_this, newWidth);
+      }, _classPrivateFieldGet2(_debounceDelay, _this)));
+    });
+    if (_instance._) {
+      return _instance._;
+    }
+    _classPrivateFieldSet2(_cssVariableName, this, cssVariableName);
+    this.scrollbarWidth = _assertClassBrand(_ScrollbarWidthObserver_brand, this, _getSystemScrollbarWidth).call(this);
+    _assertClassBrand(_ScrollbarWidthObserver_brand, this, _setScrollbarWidthVariable).call(this);
+    window.addEventListener("resize", _classPrivateFieldGet2(_onResize, this));
+    _instance._ = this;
+  }
+  return _createClass(ScrollbarWidthObserver, [{
+    key: "disconnect",
+    value: function disconnect() {
+      if (!_instance._) return;
+      clearTimeout(_classPrivateFieldGet2(_timer, this));
+      window.removeEventListener("resize", _classPrivateFieldGet2(_onResize, this));
+      document.body.style.removeProperty(_classPrivateFieldGet2(_cssVariableName, this));
+      this.scrollbarWidth = null;
+      _instance._ = null;
+    }
+  }]);
+}();
+function _updateScrollbarWidth(width) {
+  this.scrollbarWidth = width;
+  _assertClassBrand(_ScrollbarWidthObserver_brand, this, _setScrollbarWidthVariable).call(this);
+  window.dispatchEvent(new CustomEvent("scrollbarwidthchange", {
+    detail: {
+      scrollbarWidth: width
+    }
+  }));
+}
+function _getSystemScrollbarWidth() {
+  var div = document.createElement("div");
+  div.style.width = "100px";
+  div.style.height = "100px";
+  div.style.overflow = "scroll";
+  div.style.position = "absolute";
+  div.style.top = "-9999px";
+  document.body.appendChild(div);
+  var width = div.offsetWidth - div.clientWidth;
+  document.body.removeChild(div);
+  return width;
+}
+function _setScrollbarWidthVariable() {
+  document.body.style.setProperty(_classPrivateFieldGet2(_cssVariableName, this), "".concat(this.scrollbarWidth, "px"));
+}
+var _instance = {
+  _: void 0
+};
+
+export { ScrollbarWidthObserver as default };

package/dist/js/index.js

@@ -0,0 +1,130 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+  typeof define === 'function' && define.amd ? define(factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.ScrollbarWidthObserver = factory());
+})(this, (function () { 'use strict';
+
+  function _assertClassBrand(e, t, n) {
+    if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n;
+    throw new TypeError("Private element is not present on this object");
+  }
+  function _checkPrivateRedeclaration(e, t) {
+    if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object");
+  }
+  function _classCallCheck(a, n) {
+    if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function");
+  }
+  function _classPrivateFieldGet2(s, a) {
+    return s.get(_assertClassBrand(s, a));
+  }
+  function _classPrivateFieldInitSpec(e, t, a) {
+    _checkPrivateRedeclaration(e, t), t.set(e, a);
+  }
+  function _classPrivateFieldSet2(s, a, r) {
+    return s.set(_assertClassBrand(s, a), r), r;
+  }
+  function _classPrivateMethodInitSpec(e, a) {
+    _checkPrivateRedeclaration(e, a), a.add(e);
+  }
+  function _defineProperties(e, r) {
+    for (var t = 0; t < r.length; t++) {
+      var o = r[t];
+      o.enumerable = o.enumerable || false, o.configurable = true, "value" in o && (o.writable = true), Object.defineProperty(e, _toPropertyKey(o.key), o);
+    }
+  }
+  function _createClass(e, r, t) {
+    return r && _defineProperties(e.prototype, r), Object.defineProperty(e, "prototype", {
+      writable: false
+    }), e;
+  }
+  function _toPrimitive(t, r) {
+    if ("object" != typeof t || !t) return t;
+    var e = t[Symbol.toPrimitive];
+    if (void 0 !== e) {
+      var i = e.call(t, r);
+      if ("object" != typeof i) return i;
+      throw new TypeError("@@toPrimitive must return a primitive value.");
+    }
+    return (String )(t);
+  }
+  function _toPropertyKey(t) {
+    var i = _toPrimitive(t, "string");
+    return "symbol" == typeof i ? i : i + "";
+  }
+
+  var _timer = /*#__PURE__*/new WeakMap();
+  var _debounceDelay = /*#__PURE__*/new WeakMap();
+  var _cssVariableName = /*#__PURE__*/new WeakMap();
+  var _onResize = /*#__PURE__*/new WeakMap();
+  var _ScrollbarWidthObserver_brand = /*#__PURE__*/new WeakSet();
+  var ScrollbarWidthObserver = /*#__PURE__*/function () {
+    function ScrollbarWidthObserver() {
+      var _this = this;
+      var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+        _ref$cssVariableName = _ref.cssVariableName,
+        cssVariableName = _ref$cssVariableName === void 0 ? "--scrollbar-width" : _ref$cssVariableName;
+      _classCallCheck(this, ScrollbarWidthObserver);
+      _classPrivateMethodInitSpec(this, _ScrollbarWidthObserver_brand);
+      _classPrivateFieldInitSpec(this, _timer, null);
+      _classPrivateFieldInitSpec(this, _debounceDelay, 50);
+      _classPrivateFieldInitSpec(this, _cssVariableName, void 0);
+      _classPrivateFieldInitSpec(this, _onResize, function () {
+        clearTimeout(_classPrivateFieldGet2(_timer, _this));
+        _classPrivateFieldSet2(_timer, _this, setTimeout(function () {
+          var newWidth = _assertClassBrand(_ScrollbarWidthObserver_brand, _this, _getSystemScrollbarWidth).call(_this);
+          if (newWidth === _this.scrollbarWidth) return;
+          _assertClassBrand(_ScrollbarWidthObserver_brand, _this, _updateScrollbarWidth).call(_this, newWidth);
+        }, _classPrivateFieldGet2(_debounceDelay, _this)));
+      });
+      if (_instance._) {
+        return _instance._;
+      }
+      _classPrivateFieldSet2(_cssVariableName, this, cssVariableName);
+      this.scrollbarWidth = _assertClassBrand(_ScrollbarWidthObserver_brand, this, _getSystemScrollbarWidth).call(this);
+      _assertClassBrand(_ScrollbarWidthObserver_brand, this, _setScrollbarWidthVariable).call(this);
+      window.addEventListener("resize", _classPrivateFieldGet2(_onResize, this));
+      _instance._ = this;
+    }
+    return _createClass(ScrollbarWidthObserver, [{
+      key: "disconnect",
+      value: function disconnect() {
+        if (!_instance._) return;
+        clearTimeout(_classPrivateFieldGet2(_timer, this));
+        window.removeEventListener("resize", _classPrivateFieldGet2(_onResize, this));
+        document.body.style.removeProperty(_classPrivateFieldGet2(_cssVariableName, this));
+        this.scrollbarWidth = null;
+        _instance._ = null;
+      }
+    }]);
+  }();
+  function _updateScrollbarWidth(width) {
+    this.scrollbarWidth = width;
+    _assertClassBrand(_ScrollbarWidthObserver_brand, this, _setScrollbarWidthVariable).call(this);
+    window.dispatchEvent(new CustomEvent("scrollbarwidthchange", {
+      detail: {
+        scrollbarWidth: width
+      }
+    }));
+  }
+  function _getSystemScrollbarWidth() {
+    var div = document.createElement("div");
+    div.style.width = "100px";
+    div.style.height = "100px";
+    div.style.overflow = "scroll";
+    div.style.position = "absolute";
+    div.style.top = "-9999px";
+    document.body.appendChild(div);
+    var width = div.offsetWidth - div.clientWidth;
+    document.body.removeChild(div);
+    return width;
+  }
+  function _setScrollbarWidthVariable() {
+    document.body.style.setProperty(_classPrivateFieldGet2(_cssVariableName, this), "".concat(this.scrollbarWidth, "px"));
+  }
+  var _instance = {
+    _: void 0
+  };
+
+  return ScrollbarWidthObserver;
+
+}));

package/dist/js/index.min.js

@@ -0,0 +1 @@
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).ScrollbarWidthObserver=e()}(this,function(){"use strict";function t(t,e,i){if("function"==typeof t?t===e:t.has(e))return arguments.length<3?e:i;throw new TypeError("Private element is not present on this object")}function e(t,e){if(e.has(t))throw new TypeError("Cannot initialize the same private elements twice on an object")}function i(e,i){return e.get(t(e,i))}function n(t,i,n){e(t,i),i.set(t,n)}function o(e,i,n){return e.set(t(e,i),n),n}function r(t,e,i){return e&&function(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,l(n.key),n)}}(t.prototype,e),Object.defineProperty(t,"prototype",{writable:!1}),t}function l(t){var e=function(t,e){if("object"!=typeof t||!t)return t;var i=t[Symbol.toPrimitive];if(void 0!==i){var n=i.call(t,e);if("object"!=typeof n)return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t,"string");return"symbol"==typeof e?e:e+""}var s=new WeakMap,a=new WeakMap,c=new WeakMap,u=new WeakMap,h=new WeakSet,d=function(){return r(function r(){var l,d,b=this,m=(arguments.length>0&&void 0!==arguments[0]?arguments[0]:{}).cssVariableName,w=void 0===m?"--scrollbar-width":m;if(function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,r),e(l=this,d=h),d.add(l),n(this,s,null),n(this,a,50),n(this,c,void 0),n(this,u,function(){clearTimeout(i(s,b)),o(s,b,setTimeout(function(){var e=t(h,b,p).call(b);e!==b.scrollbarWidth&&t(h,b,f).call(b,e)},i(a,b)))}),y._)return y._;o(c,this,w),this.scrollbarWidth=t(h,this,p).call(this),t(h,this,v).call(this),window.addEventListener("resize",i(u,this)),y._=this},[{key:"disconnect",value:function(){y._&&(clearTimeout(i(s,this)),window.removeEventListener("resize",i(u,this)),document.body.style.removeProperty(i(c,this)),this.scrollbarWidth=null,y._=null)}}])}();function f(e){this.scrollbarWidth=e,t(h,this,v).call(this),window.dispatchEvent(new CustomEvent("scrollbarwidthchange",{detail:{scrollbarWidth:e}}))}function p(){var t=document.createElement("div");t.style.width="100px",t.style.height="100px",t.style.overflow="scroll",t.style.position="absolute",t.style.top="-9999px",document.body.appendChild(t);var e=t.offsetWidth-t.clientWidth;return document.body.removeChild(t),e}function v(){document.body.style.setProperty(i(c,this),"".concat(this.scrollbarWidth,"px"))}var y={_:void 0};return d});

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@rfkhusnutdinov/scrollbar-width-observer",
+  "version": "1.0.2",
+  "description": "JavaScript plugin to monitor scrollbar width and update a CSS variable.",
+  "author": "Rinat Khusnutdinov <rfkhusnutdinov@yandex.ru>",
+  "homepage": "https://github.com/rfkhusnutdinov/scrollbar-width-observer#readme",
+  "bugs": {
+    "url": "https://github.com/rfkhusnutdinov/scrollbar-width-observer/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rfkhusnutdinov/scrollbar-width-observer.git"
+  },
+  "keywords": [
+    "javascript",
+    "plugin",
+    "scrollbar",
+    "resize",
+    "observer",
+    "ui",
+    "scroll"
+  ],
+  "files": [
+    "dist",
+    "src"
+  ],
+  "main": "./dust/js/index.js",
+  "module": "./dist/js/index.esm.js",
+  "license": "MIT",
+  "babel": {
+    "presets": [
+      "@babel/preset-env"
+    ]
+  },
+  "browserslist": [
+    ">0.3%",
+    "defaults",
+    "fully supports es6-module"
+  ],
+  "scripts": {
+    "lint:scripts": "eslint src/**/*.{js,mjs} --fix || true",
+    "lint:styles": "stylelint --fix ./src/**/*.{scss,css}",
+    "lint": "npm run lint:scripts && npm run lint:styles",
+    "build:styles": "node scripts/build-styles.mjs --prod",
+    "build:scripts": "node scripts/build-scripts.mjs --prod",
+    "build": "npm run build:styles && npm run build:scripts",
+    "watch": "node scripts/watch-files.mjs"
+  },
+  "devDependencies": {
+    "@babel/preset-env": "^7.26.7",
+    "@eslint/js": "^9.19.0",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^28.0.2",
+    "@rollup/plugin-node-resolve": "^16.0.0",
+    "@rollup/plugin-terser": "^0.4.4",
+    "autoprefixer": "^10.4.20",
+    "chokidar": "^4.0.3",
+    "cssnano": "^7.0.6",
+    "eslint": "^9.19.0",
+    "globals": "^15.14.0",
+    "postcss": "^8.5.1",
+    "prettier": "^3.4.2",
+    "rollup": "^4.34.0",
+    "sass": "^1.83.4",
+    "stylelint": "^16.14.1",
+    "stylelint-config-recess-order": "^6.0.0",
+    "stylelint-config-standard-scss": "^14.0.0"
+  }
+}

package/src/js/index.js

@@ -0,0 +1,82 @@
+class ScrollbarWidthObserver {
+  static #instance;
+  #timer = null;
+  #debounceDelay = 50;
+  #cssVariableName;
+
+  constructor({ cssVariableName = "--scrollbar-width" } = {}) {
+    if (ScrollbarWidthObserver.#instance) {
+      return ScrollbarWidthObserver.#instance;
+    }
+
+    this.#cssVariableName = cssVariableName;
+
+    this.scrollbarWidth = this.#getSystemScrollbarWidth();
+
+    this.#setScrollbarWidthVariable();
+    window.addEventListener("resize", this.#onResize);
+
+    ScrollbarWidthObserver.#instance = this;
+  }
+
+  #onResize = () => {
+    clearTimeout(this.#timer);
+
+    this.#timer = setTimeout(() => {
+      const newWidth = this.#getSystemScrollbarWidth();
+      if (newWidth === this.scrollbarWidth) return;
+
+      this.#updateScrollbarWidth(newWidth);
+    }, this.#debounceDelay);
+  };
+
+  #updateScrollbarWidth(width) {
+    this.scrollbarWidth = width;
+    this.#setScrollbarWidthVariable();
+
+    window.dispatchEvent(
+      new CustomEvent("scrollbarwidthchange", {
+        detail: { scrollbarWidth: width },
+      }),
+    );
+  }
+
+  #getSystemScrollbarWidth() {
+    const div = document.createElement("div");
+
+    div.style.width = "100px";
+    div.style.height = "100px";
+    div.style.overflow = "scroll";
+    div.style.position = "absolute";
+    div.style.top = "-9999px";
+
+    document.body.appendChild(div);
+
+    const width = div.offsetWidth - div.clientWidth;
+
+    document.body.removeChild(div);
+
+    return width;
+  }
+
+  #setScrollbarWidthVariable() {
+    document.body.style.setProperty(
+      this.#cssVariableName,
+      `${this.scrollbarWidth}px`,
+    );
+  }
+
+  disconnect() {
+    if (!ScrollbarWidthObserver.#instance) return;
+
+    clearTimeout(this.#timer);
+    window.removeEventListener("resize", this.#onResize);
+
+    document.body.style.removeProperty(this.#cssVariableName);
+
+    this.scrollbarWidth = null;
+    ScrollbarWidthObserver.#instance = null;
+  }
+}
+
+export default ScrollbarWidthObserver;