Socket
Socket
Sign inDemoInstall

@xobotyi/scrollbar-width

Package Overview
Dependencies
0
Maintainers
1
Versions
24
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@xobotyi/scrollbar-width

A tool to get browser's scrollbars width.


Version published
Maintainers
1
Weekly downloads
1,438,578
decreased by-4.11%

Weekly downloads

Readme

Source

@xobotyi/scrollbar-width

A tool to get browser's scrollbars width.

Build status NPM version NPM weekly downloads License Types definition Codacy Code Grade Tests LOC

× LIVE EXAMPLE ×


❤️Please consider starring this project to show your love and support.🙌

Installation

npm install @xobotyi/scrollbar-width
# or via yarn
yarn add @xobotyi/scrollbar-width

INSTALLATION NOTE:
This lib is written in TypeScript and delivered with both, transpiled and untranspiled ES versions:

  • main field of package.json is pointing to transpiled ES5-compatible version with CJS modules resolution;
  • module field is pointing to transpiled ES5-compatible version with ES modules resolution;
  • esnext field is pointing to the ESnext version with ES modules resolution;

OR
you can add it directly to your site via the <script /> with help of UNPKG:

<script src="https://unpkg.com/@xobotyi/scrollbar-width/dist/index.min.js"/>

After that you will be able to use the function as xobotyi.scrollbarWidth()

Usage

import { scrollbarWidth } from '@xobotyi/scrollbar-width';

scrollbarWidth(); // for most browsers will return 17 and 0 for SSR environment
// or undefined if to call it too early [read below]

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.

NOTE:
Function will return undefined in case being called before the DOM is ready.

One more clarification

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.
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.

  • react-scrollbars-custom — The best React custom scrollbars component. Allows you to customise scrollbars as you like it, crossbrowser!
  • zoom-level — A comprehensive cross-browser package that allow you to determine page's and element's zoom level.
  • @xobotyi/should-reverse-rtl-scroll — A tool detecting if RTL scroll value should be negative.

Keywords

FAQs

Last updated on 25 Mar 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc