| 1 | <div align="center">
|
|---|
| 2 | <H1>@xobotyi/scrollbar-width</H1>
|
|---|
| 3 | <p>A tool to get browser's scrollbars width.</p>
|
|---|
| 4 | <p>
|
|---|
| 5 | <a href="https://www.npmjs.com/package/@xobotyi/scrollbar-width">
|
|---|
| 6 | <img src="https://flat.badgen.net/travis/xobotyi/scrollbar-width" alt="Build status"/>
|
|---|
| 7 | </a>
|
|---|
| 8 | <a href="https://www.npmjs.com/package/@xobotyi/scrollbar-width">
|
|---|
| 9 | <img src="https://flat.badgen.net/npm/v/@xobotyi/scrollbar-width" alt="NPM version"/>
|
|---|
| 10 | </a>
|
|---|
| 11 | <a href="https://www.npmjs.com/package/@xobotyi/scrollbar-width">
|
|---|
| 12 | <img src="https://flat.badgen.net/npm/dw/@xobotyi/scrollbar-width" alt="NPM weekly downloads"/>
|
|---|
| 13 | </a>
|
|---|
| 14 | <a href="https://www.npmjs.com/package/@xobotyi/scrollbar-width">
|
|---|
| 15 | <img src="https://flat.badgen.net/npm/license/@xobotyi/scrollbar-width" alt="License"/>
|
|---|
| 16 | </a>
|
|---|
| 17 | <a href="https://www.npmjs.com/package/@xobotyi/scrollbar-width">
|
|---|
| 18 | <img src="https://flat.badgen.net/npm/types/@xobotyi/scrollbar-width" alt="Types definition"/>
|
|---|
| 19 | </a>
|
|---|
| 20 | <a href="https://www.npmjs.com/package/@xobotyi/scrollbar-width">
|
|---|
| 21 | <img src="https://flat.badgen.net/codacy/grade/1bc2560a1b614f9595b718169c969b4d" alt="Codacy Code Grade"/>
|
|---|
| 22 | </a>
|
|---|
| 23 | <a href="https://www.npmjs.com/package/@xobotyi/scrollbar-width">
|
|---|
| 24 | <img src="https://flat.badgen.net/codacy/coverage/1bc2560a1b614f9595b718169c969b4d" alt="Tests LOC"/>
|
|---|
| 25 | </a>
|
|---|
| 26 | </p>
|
|---|
| 27 | <p>× <strong><a href="https://codesandbox.io/s/xobotyiscrollbar-width-live-demo-bp5no">LIVE EXAMPLE</a></strong> ×</p>
|
|---|
| 28 | </div>
|
|---|
| 29 |
|
|---|
| 30 | ---
|
|---|
| 31 |
|
|---|
| 32 | <div align="center">❤️Please consider starring this project to show your love and support.🙌</div>
|
|---|
| 33 |
|
|---|
| 34 | ---
|
|---|
| 35 |
|
|---|
| 36 | ## Installation
|
|---|
| 37 |
|
|---|
| 38 | ```bash
|
|---|
| 39 | npm install @xobotyi/scrollbar-width
|
|---|
| 40 | # or via yarn
|
|---|
| 41 | yarn add @xobotyi/scrollbar-width
|
|---|
| 42 | ```
|
|---|
| 43 | _INSTALLATION NOTE:_
|
|---|
| 44 | This lib is written in TypeScript and delivered with both, transpiled and untranspiled ES versions:
|
|---|
| 45 |
|
|---|
| 46 | - `main` field of package.json is pointing to transpiled ES5-compatible version with CJS modules resolution;
|
|---|
| 47 | - `module` field is pointing to transpiled ES5-compatible version with ES modules resolution;
|
|---|
| 48 | - `esnext` field is pointing to the ESnext version with ES modules resolution;
|
|---|
| 49 |
|
|---|
| 50 |
|
|---|
| 51 | **OR**
|
|---|
| 52 | you can add it directly to your site via the `<script />` with help of [UNPKG](https://unpkg.com):
|
|---|
| 53 | ```html
|
|---|
| 54 | <script src="https://unpkg.com/@xobotyi/scrollbar-width/dist/index.min.js"/>
|
|---|
| 55 | ```
|
|---|
| 56 | After that you will be able to use the function as `xobotyi.scrollbarWidth()`
|
|---|
| 57 |
|
|---|
| 58 | ## Usage
|
|---|
| 59 |
|
|---|
| 60 | ```javascript
|
|---|
| 61 | import { scrollbarWidth } from '@xobotyi/scrollbar-width';
|
|---|
| 62 |
|
|---|
| 63 | scrollbarWidth(); // for most browsers will return 17 and 0 for SSR environment
|
|---|
| 64 | // or undefined if to call it too early [read below]
|
|---|
| 65 | ```
|
|---|
| 66 |
|
|---|
| 67 | This function caches the value to avoid increased resources usage. In case you want to get re-calculated value - pass `true` as first call parameter.
|
|---|
| 68 |
|
|---|
| 69 | >**NOTE:**
|
|---|
| 70 | >Function will return `undefined` in case being called before the DOM is ready.
|
|---|
| 71 |
|
|---|
| 72 | #### One more clarification
|
|---|
| 73 | This function has inner cache due to scrollbars width is not intended to be changed since initial call, but it can in case you toggle the device emulation.
|
|---|
| 74 | If you need function to recalculate the width call it with `true` parameter and get new value or set `scrollbarWidth.__cache` to `undefined` and next call will return the fresh value.
|
|---|
| 75 |
|
|---|
| 76 | ## Related projects
|
|---|
| 77 |
|
|---|
| 78 | - [react-scrollbars-custom](https://www.npmjs.com/package/react-scrollbars-custom) — The best React custom scrollbars component. Allows you to customise scrollbars as you like it, crossbrowser!
|
|---|
| 79 | - [zoom-level](https://www.npmjs.com/package/zoom-level) — A comprehensive cross-browser package that allow you to determine page's and element's zoom level.
|
|---|
| 80 | - [@xobotyi/should-reverse-rtl-scroll](https://www.npmjs.com/package/@xobotyi/should-reverse-rtl-scroll) — A tool detecting if RTL scroll value should be negative.
|
|---|
