https://github.com/jamesloper/react-rolling-paper

https://github.com/jamesloper/react-rolling-paper

Last synced: 27 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/jamesloper/react-rolling-paper
• Owner: jamesloper
• License: mit
• Created: 2018-03-30T15:05:32.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2019-05-14T15:11:15.000Z (over 5 years ago)
• Last Synced: 2024-04-23T18:15:38.972Z (8 months ago)
• Language: JavaScript
• Size: 79.1 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
React component that creates a `div` with an optimized custom scrollbar inside of it. The built file is about 1k, only 70 lines of code! I doubt I can make it any smaller.

`npm install --save react-rolling-paper`

![Screenshot](https://i.imgur.com/IC2qON7.png)

## Usage

```javascript

import RollingPaper from 'react-rolling-paper';

    
Long content to scroll


```

## Some CSS Required

You may wish to configure the css in your own project. Please use this as a starting point for your own needs.

```css

.scroller {position:relative; touch-action:pan-x;}

.scroller-content {height:100%; overflow:scroll; overflow:-moz-scrollbars-none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch;}

.scroller-content::-webkit-scrollbar {display:none;}

.scrollbar {position:absolute; top:0; right:0; background:#888; width:4px; opacity:0; border-radius:2px; transition:opacity .2s;}

.scroller:hover .scrollbar, .scroller.active .scrollbar {opacity:1;}

```