https://github.com/fluse/react-scroll-bound
Prevent scrolling on parent element if list reached end or start.
https://github.com/fluse/react-scroll-bound
component es6 overflow parent prevent react react-component reactjs scroll scrolling
Last synced: 8 months ago
JSON representation
Prevent scrolling on parent element if list reached end or start.
- Host: GitHub
- URL: https://github.com/fluse/react-scroll-bound
- Owner: fluse
- Created: 2016-05-12T07:50:41.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T02:22:50.000Z (almost 3 years ago)
- Last Synced: 2025-05-07T13:04:08.741Z (8 months ago)
- Topics: component, es6, overflow, parent, prevent, react, react-component, reactjs, scroll, scrolling
- Language: JavaScript
- Homepage: https://fluse.github.io/react-scroll-bound/
- Size: 2.2 MB
- Stars: 6
- Watchers: 1
- Forks: 1
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](https://fluse.github.io/react-scroll-bound/)**
supports react 15.x and 16.x
## Install
```
npm install react-scroll-bound --save
```
## Usage
```jsx
import ScrollBound from 'react-scroll-bound'
{this.getListPoints()}
```
Set css for element overflow scroll
```css
.my-class-name {
max-height: 250px;
overflow-y: auto;
}
```
### Change HTML-Tag
default tagName is `
- `
```jsx
{this.getListPoints()}
```
### Set properties
all attributes and properties will transmitted with `{...this.props}`
```jsx
{this.getListPoints()}
```
## 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
[](https://www.paypal.me/schauf)
[get in touch?](http://www.holger-schauf.de)