Skip to content

Commit

Permalink
-
Browse files Browse the repository at this point in the history
  • Loading branch information
Yair Even Or committed Sep 28, 2020
1 parent 95f82aa commit 061ac43
Showing 1 changed file with 31 additions and 18 deletions.
49 changes: 31 additions & 18 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,31 +25,44 @@ in all browsers / older versions and the level of customization isn't flexible e

👉 Make sure to *import* `fakescroll.css`

## Example markup:
## [React port](https://codesandbox.io/s/react-fakescroll-4rdel)

<div class="foo">
...
...
...
</div>
```js
import FakeScroll from "@yaireo/fakescroll/react.fakescroll.js"
import "@yaireo/fakescroll/fakescroll.css"

## Initialize custom scrollbar:
<FakeScroll className="foo" track="smooth">
...
</FakeScroll>
```

## Example markup:
```html
<div class="foo">
...
...
...
</div>
```

document.querySelector('.foo').fakeScroll();
## Initialize custom scrollbar:
```js
document.querySelector('.foo').fakeScroll();
```

## The above markup will now become:

<div class="foo">
<div class="fakeScroll__wrap">
<div class="fakeScroll__content">
...
...
...
</div>
```html
<div class="foo fakeScroll fakeScroll--hasBar">
<div class="fakeScroll__wrap">
<div class="fakeScroll__content">
...
...
...
</div>
<div class="fakeScroll__bar"></div>
</div>

<div class="fakeScroll__bar"></div>
</div>
```
## Browser support

The script probably won't work on IE without [Babel](https://babeljs.io/docs/en/babel-cli) & [ES2015 polyfills](https://github.com/paulmillr/es6-shim).
Expand Down

0 comments on commit 061ac43

Please sign in to comment.