https://github.com/rikschennink/scrollscreen

🌁 Custom styled vertical scrollbars
https://github.com/rikschennink/scrollscreen

custom scroll scrollbar style vertical

Last synced: 2 months ago
JSON representation

🌁 Custom styled vertical scrollbars

• Host: GitHub
• URL: https://github.com/rikschennink/scrollscreen
• Owner: rikschennink
• License: mit
• Created: 2018-10-12T08:10:09.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2020-04-10T06:26:26.000Z (about 5 years ago)
• Last Synced: 2025-03-24T19:21:42.680Z (3 months ago)
• Topics: custom, scroll, scrollbar, style, vertical
• Language: JavaScript
• Homepage: https://rikschennink.github.io/scrollscreen/
• Size: 971 KB
• Stars: 13
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Scrollscreen

[![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/rikschennink/scrollscreen/blob/gh-pages/LICENSE)

[![npm version](https://badge.fury.io/js/scrollscreen.svg)](https://badge.fury.io/js/scrollscreen)

Scrollscreen is a 1KB dependency free JavaScript library that positions a layer precisely on top of the browser default scrollbar in turn allowing custom styles.

Tested on IE11, Edge, Firefox, Chrome, Safari and iOS.

[Live demo](https://rikschennink.github.io/scrollscreen/)



## Installation

Add CSS file to `` and add JS file before end of ``.

## Usage

Put the `scrollscreen` CSS class on a container. Make sure the container's height is limited somehow so it's content overflows.

```html

.scrollscreen--track {

    /* width of track, 18px covers native track on MacOS and Windows */

    width: 18px;

    background: #bebec1;

}

.scrollscreen--slider {

    /* use for spacing between slider and track */

    padding: .25em;

}

.scrollscreen--slider::after {

    /* the slider button style */

    background: #5f6165;

    border-radius: 9999em;

}

    

.scrollscreen {

    /* set scrollscreen to a fixed height to make scrollbars appear */

    height: 100px;

}



    
Hi! I'm Scrollscreen!

    
Scrollscreen positions a layer precisely on top of the browser default scrollbar allowing custom styles.



```