https://github.com/websemantics/vscode-scrollbar
Synthetic scrollbar with transparent track and style-able knob
https://github.com/websemantics/vscode-scrollbar
scrollbars synthetic vscode
Last synced: about 1 month ago
JSON representation
Synthetic scrollbar with transparent track and style-able knob
- Host: GitHub
- URL: https://github.com/websemantics/vscode-scrollbar
- Owner: websemantics
- Created: 2017-11-16T02:44:42.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2017-12-02T13:19:44.000Z (about 8 years ago)
- Last Synced: 2024-12-26T08:42:35.296Z (12 months ago)
- Topics: scrollbars, synthetic, vscode
- Language: JavaScript
- Size: 6.84 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
```
┌─────────────────────────────────────────────────────┬─┬───────────────────────┐
│ ╭─╮╭─╮┬─╮╭─╮┬ ┬ ╭─╮┬─╮ │ │ │
│ ╰─╮│ ├┬╯│ ││ │ ├┤ ├┬╯ ▐█▊ │
│ ╰─╯╰─╯┴╰─╰─╯┴─╯┴─╯╰─╯┴╰─ ▐█▊ ◀─ Knob │
│ ▐█▊ │
│ Horizontal Orientation │ │ │
│ │ │ │ ◀─ Transparent Track │
│ ▼ │ │ │
├──────────────────────────▄▄▄▄▄▄▄▄▄▄▄▄───────────────┤ │ │
└──────────────────────────▀▀▀▀▀▀▀▀▀▀▀▀───────────────┴─┴───────────────────────┘
```
Synthetic scrollbar with transparent track and style-able knob, Visual Stuido Code style.
[](https://websemantics.github.io/vscode-scrollbar/)
## Usage
Consider the following markup
```html
```
And the following style,
```css
#content {
width: 2000px;
height: 2000px;
}
```
To enable the Vscode-style scroller to manager such a large content element, import the javascript / css files of this project into a new html page then create an instance of the `Scroller` class (see [Demo](https://websemantics.github.io/vscode-scrollbar/))
```js
const scroller = new Scroller(document.querySelector('.container'))
window.onresize = () => {
scroller.resize()
}
```
To adjust the `knob` size, attach the `resize` method of the `Scroller` instance with window resize event as show above.
That's all, enjoy!
## Support
Need help or have a question? post a questions at [StackOverflow](https://stackoverflow.com/questions/tagged/vscode-scrollbar+web+semantics)
*Please don't use the issue trackers for support/questions.*
## Contributions
We are more than happy to accept external contributions to the project in the form of feedback, bug reports and even better - pull requests :)
## Copyright and license
[MIT license](http://opensource.org/licenses/mit-license.php)
Copyright (c) Web Semantics, Inc.