react-scroll-bound

Prevent scrolling on parent element if list reached end or start.

Brings a better control for user and increase use experience.

Watch Demo

supports react 15.x and 16.x

Install

npm install react-scroll-bound --save

Usage

 
import ScrollBound from 'react-scroll-bound'
 
<ScrollBound>
    {this.getListPoints()}
</ScrollBound>
 

Set css for element overflow scroll

.my-class-name {
    max-height: 250px;
    overflow-y: auto;
}

Change HTML-Tag

default tagName is <ul>

 
<ScrollBound tagName="div">
    {this.getListPoints()}
</ScrollBound>
 

Set properties

all attributes and properties will transmitted with {...this.props}

 
<ScrollBound 
    id="name" 
    onWheel={onWheel} 
    onClick={onClick} 
    className="my-list"
>
    {this.getListPoints()}
</ScrollBound>
 

Development

if you want to add or optimize this component, feel free <3

Run Dev Server

npm start

Compile to ES5

npm run compile

Give me a coffee

get in touch?