Skip to content

Commit

Permalink
add new API for controlling the scroll position
Browse files Browse the repository at this point in the history
  • Loading branch information
Hao Liu committed Apr 10, 2019
1 parent 654ea47 commit 5256491
Show file tree
Hide file tree
Showing 8 changed files with 561 additions and 391 deletions.
30 changes: 18 additions & 12 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,9 @@ Visit [http://fuermosi777.github.io/react-free-scrollbar/](http://fuermosi777.gi
## Install

$ npm install --save react-free-scrollbar

or

$ yarn add react-free-scrollbar

## Usage
Expand All @@ -28,7 +31,7 @@ Visit [http://fuermosi777.github.io/react-free-scrollbar/](http://fuermosi777.gi

## Props

### `className: String` optional
### `className: string` optional

Add custom class to the scroller. If you add a custom className to the component, all default styles will not working. You have to also add the following styles in your CSS files:

Expand All @@ -39,37 +42,37 @@ Add custom class to the scroller. If you add a custom className to the component
.demo-vertical-handler {} // required
.demo-horizontal-handler {} // required

### `style: Object` optional
### `style: object` optional

If you just want to add some simple styles, you can pass this prop to the component.

Example:

<FreeScrollerBar style={{width: "100%", height: "100%"}}></FreeScrollerBar>

### `fixed: Bool` optional
### `fixed: boolean` optional

You can pass `fixed` to decide if handler's position: fixed or static. If `fixed` equals `true`, then the handler will overlap the content inside the scroller.

### `autohide: Bool` optional
### `autohide: boolean` optional

Set `true` if you want a macOS style auto-hide scroller.

### `timeout: Integer` optional
### `timeout: number` optional

The time length of the handler disappears. Default: 2000

### `tracksize: String`
### `tracksize: string`

The width of the vertical handler or the height of the horizontal handler. Default: 10px

### `start: String`
### `start: string | object`

The starting position of the scroll area. Default: "top left".
The starting position of the scroll area, can be descriptive string or an object.

Options: "bottom", "bottom right", "top right", "right"
Options: "bottom", "bottom right", "top right", "right", `{top: 20, left: 30}`

### `browserOffset: String`
### `browserOffset: string`

The browser scroll bar width. Default: "17px". [It should fit for most browsers](https://codepen.io/sambible/post/browser-scrollbar-widths).

Expand Down Expand Up @@ -126,6 +129,9 @@ For more examples, go to [http://fuermosi777.github.io/react-free-scrollbar/](ht

`$ yarn dev`

Before publish: make sure run `yarn demo-build` and `yarn dist`.

Go to `http://localhost:8080`.

## Publish

`$ yarn dist`
`$ npm publish`
239 changes: 164 additions & 75 deletions demo/src/entry.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,90 +1,179 @@
import * as React from 'react';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
// @ts-ignore
import FreeScrollBar from '../../src/index.tsx';
import './demo.less';

let things = ['Clean the room', 'Take out the ice-cream', 'Do the homework', 'Feed the cat', 'Clean the car', 'Go to dinner', 'Clean the cups', 'Throw a party', 'Repeat things above', 'Think about the trip', 'Make up a list', 'Go out with friends', 'Kick neighbor\'s butt'];
const things = [
'Clean the room',
'Take out the ice-cream',
'Do the homework',
'Feed the cat',
'Clean the car',
'Go to dinner',
'Clean the cups',
'Throw a party',
'Repeat things above',
'Think about the trip',
'Make up a list',
'Go out with friends',
"Kick neighbor's butt",
];

let List = things.map((item, key) => {
return (
<li key={key}>{item}</li>
);
const List = things.map((item, key) => {
return <li key={key}>{item}</li>;
});

let Text = (<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente sint quos at. Quae in voluptate, autem ipsa porro quisquam architecto eos impedit laudantium, dolorem blanditiis fugiat maxime, veritatis voluptas temporibus?<br/><br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic consequuntur, incidunt explicabo reiciendis, reprehenderit voluptates dolorum possimus quo consequatur ratione quasi ipsa provident, ducimus similique. Ipsum quo alias exercitationem corrupti?<br/><br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic consequuntur, incidunt explicabo reiciendis, reprehenderit voluptates dolorum possimus quo consequatur ratione quasi ipsa provident, ducimus similique. Ipsum quo alias exercitationem corrupti?<br/><br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic consequuntur, incidunt explicabo reiciendis, reprehenderit voluptates dolorum possimus quo consequatur ratione quasi ipsa provident, ducimus similique. Ipsum quo alias exercitationem corrupti?</p>);
const Text = (
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente sint quos at. Quae in
voluptate, autem ipsa porro quisquam architecto eos impedit laudantium, dolorem blanditiis
fugiat maxime, veritatis voluptas temporibus?
<br />
<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic consequuntur, incidunt explicabo
reiciendis, reprehenderit voluptates dolorum possimus quo consequatur ratione quasi ipsa
provident, ducimus similique. Ipsum quo alias exercitationem corrupti?
<br />
<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic consequuntur, incidunt explicabo
reiciendis, reprehenderit voluptates dolorum possimus quo consequatur ratione quasi ipsa
provident, ducimus similique. Ipsum quo alias exercitationem corrupti?
<br />
<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic consequuntur, incidunt explicabo
reiciendis, reprehenderit voluptates dolorum possimus quo consequatur ratione quasi ipsa
provident, ducimus similique. Ipsum quo alias exercitationem corrupti?
</p>
);

class Root extends React.Component {
render() {
return (
<div className="Root">
<div className="container">
<div className="page-header">
<h1>React Free Scrollbar</h1>
<p className="lead">A react module for creating customizable scroll area</p>
</div>
<a href="https://github.com/fuermosi777/react-free-scrollbar" className="btn btn-lg btn-primary"><span className="fui-github"></span> Documentation on Github</a>
private controlledScrollBar: FreeScrollBar | null = null;
private handlePositionChanged = (pos: {top?: number, left?: number}) => {
if (this.controlledScrollBar) {
this.controlledScrollBar.setPosition(pos);
}
};
public render() {
return (
<div className="Root">
<div className="container">
<div className="page-header">
<h1>React Free Scrollbar</h1>
<p className="lead">A react module for creating customizable scroll area</p>
</div>
<a
href="https://github.com/fuermosi777/react-free-scrollbar"
className="btn btn-lg btn-primary">
<span className="fui-github" /> Documentation on Github
</a>

<h3>Features</h3>
<ul>
<li>Vertical and horizontal scrolling</li>
<li>Auto-hide</li>
<li>Fully customizable</li>
</ul>

<h3>Install</h3>
<pre>
<code>$ npm install --save react-free-scrollbar</code>
</pre>
<h3>Examples</h3>
<div className="row">
<div className="col-md-6">
<h4>Quick start</h4>
<div className="quick-start">
<FreeScrollBar start={"top"} browserOffset={"20px"}>
<div className="inner">{List}{List}{List}{List}{List}{List}{List}</div>
</FreeScrollBar>
</div>
</div>
<div className="col-md-6">
<h4>Horizontal</h4>
<div className="horizontal">
<FreeScrollBar start={'bottom right'}>
<img src="https://placeimg.com/1000/1000/any" className="img-rounded"/>
</FreeScrollBar>
</div>
</div>
</div>
<div className="row">
<div className="col-md-6">
<h4>Custom styles</h4>
<div className="custom-styles">
<FreeScrollBar className="example" tracksize="12px">
<div className="inner">{List}{List}{List}{List}{List}{List}{List}</div>
</FreeScrollBar>
</div>
</div>
<div className="col-md-6">
<h4>Auto hide, and the starting position is on the "bottom right".</h4>
<div className="auto-hide">
<FreeScrollBar className="example" autohide={true} fixed={true} start={'bottom right'} onScrollbarScroll={() => {console.log('scrolled')}} onScrollbarScrollTimeout={100}>
<div className="inner">{Text}</div>
</FreeScrollBar>
</div>
</div>
</div>
<h3>Features</h3>
<ul>
<li>Vertical and horizontal scrolling</li>
<li>Auto-hide</li>
<li>Fully customizable</li>
</ul>



<h3></h3>
<a href="https://github.com/fuermosi777/react-free-scrollbar" className="btn btn-lg btn-primary"><span className="fui-github"></span> Documentation on Github</a>
<p className="footer">&copy; 2017 Hao Liu</p>
</div>
<h3>Install</h3>
<pre>
<code>$ npm install --save react-free-scrollbar</code>
</pre>
<h3>Examples</h3>
<div className="row">
<div className="col-md-6">
<h4>Quick start</h4>
<div className="quick-start">
<FreeScrollBar browserOffset={'20px'}>
<div className="inner">
{List}
{List}
{List}
{List}
{List}
{List}
{List}
</div>
</FreeScrollBar>
</div>
</div>
);
}
<div className="col-md-6">
<h4>Horizontal</h4>
<div className="horizontal">
<FreeScrollBar start={'bottom right'}>
<img src="https://placeimg.com/1000/1000/any" className="img-rounded" />
</FreeScrollBar>
</div>
</div>
</div>
<div className="row">
<div className="col-md-6">
<h4>Custom styles</h4>
<div className="custom-styles">
<FreeScrollBar className="example" tracksize="12px">
<div className="inner">
{List}
{List}
{List}
{List}
{List}
{List}
{List}
</div>
</FreeScrollBar>
</div>
</div>
<div className="col-md-6">
<h4>Auto hide, and the starting position is on the "bottom right".</h4>
<div className="auto-hide">
<FreeScrollBar
className="example"
autohide={true}
fixed={true}
start={'bottom right'}
onScrollbarScroll={() => {
console.log('scrolled');
}}
onScrollbarScrollTimeout={100}>
<div className="inner">{Text}</div>
</FreeScrollBar>
</div>
</div>
</div>
<div className="row">
<div className="col-md-12">
<h4>Control scrolling position</h4>
<input className="" placeholder="Top" onChange={(e) => this.handlePositionChanged({top: Number(e.target.value) || 10})}/>
<input className="" placeholder="Left" onChange={(e) => this.handlePositionChanged({left: Number(e.target.value) || 10})}/>
<div className="custom-styles">
<FreeScrollBar
className="example"
tracksize="12px"
ref={(el) => (this.controlledScrollBar = el)}>
<div className="inner">
{List}
{List}
{List}
{List}
{List}
{List}
{List}
</div>
</FreeScrollBar>
</div>
</div>
</div>
<h3 />
<a
href="https://github.com/fuermosi777/react-free-scrollbar"
className="btn btn-lg btn-primary">
<span className="fui-github" /> Documentation on Github
</a>
<p className="footer">&copy; 2017 ~ 2019 Hao Liu</p>
</div>
</div>
);
}
}

ReactDOM.render(
<Root/>, document.getElementById('app')
);
ReactDOM.render(<Root />, document.getElementById('app'));
Loading

0 comments on commit 5256491

Please sign in to comment.