https://github.com/ddamato/visible-scroll
Exposes visible scrollbars
https://github.com/ddamato/visible-scroll
scroll scrolling web-components
Last synced: about 2 months ago
JSON representation
Exposes visible scrollbars
- Host: GitHub
- URL: https://github.com/ddamato/visible-scroll
- Owner: ddamato
- License: isc
- Created: 2025-06-08T13:29:52.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-08T21:24:27.000Z (about 1 year ago)
- Last Synced: 2025-06-18T06:12:49.309Z (about 1 year ago)
- Topics: scroll, scrolling, web-components
- Language: JavaScript
- Homepage:
- Size: 43.9 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# [``](https://ddamato.github.io/visible-scroll/)
[](https://www.npmjs.com/package/visible-scroll)
Attemps to keep the horizontal scrollbar visible in different overflow contexts.
## Install
The project is distributed as an [`IIFE`](https://developer.mozilla.org/en-US/docs/Glossary/IIFE), so the easiest way is to just create a script tag pointing to the export hosted on [unpkg](https://unpkg.com/).
```html
```
However, you can also install the package and add the script through some build process.
```html
```
## Usage
Once the script is loaded, you can add the new component to a page.
```html
```
Visibility depends on the user's device settings. If the user has configured the scrollbars to only show while scrolling, then the scrollbars will only be visible then.
## Customizing
You may update the following properties to adjust dimension of the scrollable container.
| Property | Description |
| -------- | ----------- |
| `--visible-scroll-max-width` | Sets the maximum width for the scrollable container. |
| `--visible-scroll-max-height` | Sets the maximum height for the scrollable container. |