https://github.com/hyy1115/react-roll-container
为了解决移动端body中有多层滚动重叠导致的卡顿和点击穿透问题而封装的React滚动组件
https://github.com/hyy1115/react-roll-container
iscroll javascript jroll react
Last synced: about 1 year ago
JSON representation
为了解决移动端body中有多层滚动重叠导致的卡顿和点击穿透问题而封装的React滚动组件
- Host: GitHub
- URL: https://github.com/hyy1115/react-roll-container
- Owner: hyy1115
- License: mit
- Created: 2018-01-04T08:25:58.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-08-23T05:49:46.000Z (almost 8 years ago)
- Last Synced: 2025-04-15T18:05:58.408Z (over 1 year ago)
- Topics: iscroll, javascript, jroll, react
- Language: JavaScript
- Homepage:
- Size: 7.81 KB
- Stars: 4
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-roll-container
采用比IScroll更加轻量的JRoll封装的React组件，可以作为移动端DOM内部CSS3滚动的组件。
它是为了解决移动端body中有多层滚动重叠导致的卡顿和点击穿透问题，比如支付宝app里面的饿了么网站，就存在双层滚动时候的穿透问题。
常用在以下地方：
1、弹框内部的滚动
2、多列表的滚动
3、类似京东移动端垂直固定导航的滚动: https://so.m.jd.com/category/all.html
4、其他可能的场景
### 安装
```npm
npm i --save react-roll-container
```
### 用法
1、整个页面采用CSS3垂直滚动
```javascript
import MyJRoll from 'react-roll-container'
class Component extends React.Component {
state = {
height: '100vh'
}
render() {
const { height } = this.state
return (
{/*子组件*/}
)
}
}
```
2、组件内部的子组件采用CSS3垂直滚动
```javascript
import MyJRoll from 'react-roll-container'
class Component extends React.Component {
state = {
height: 0
}
componentDidMount() {
this.getScrollHeight()
}
getScrollHeight = () => {
//主要是求出滚动区域的实际高度，如果已知实际高度是个固定值，则不需要设置state
//如果实际高度需要根据一些特定的加减法求出来的，则通过state设置
//例如：
const header = document.querySelector('.header')
this.setState(() => ({height: getClientHeight - header.offsetHeight}))
}
render() {
const { height } = this.state
return (
头部信息
)
}
}
```
3、弹框组件采用CSS3垂直滚动
我们知道，在移动端做弹框内部的滚动的时候，会有点击穿透问题，如果采用MyJRoll组件来包装弹框，则不会有这个问题
4、更多使用场景需自行发现
### 可配置信息
height：这个是最重要的配置，因为浏览器需要知道你的滚动区域的实际高度，有时候js执行后计算高度不准确，可能是因为你的DOM还没有渲染完成，就像使用JQuery的时候要ready才能保证安全
maxHeight：通常你不需要管它
bgColor：用来设置滚动区域的背景色，默认是 '#f6f6f6'