react-roll-container
采用比IScroll更加轻量的JRoll封装的React组件,可以作为移动端DOM内部CSS3滚动的组件。
它是为了解决移动端body中有多层滚动重叠导致的卡顿和点击穿透问题,比如支付宝app里面的饿了么网站,就存在双层滚动时候的穿透问题。
常用在以下地方:
1、弹框内部的滚动
2、多列表的滚动
3、类似京东移动端垂直固定导航的滚动: https://so.m.jd.com/category/all.html
4、其他可能的场景
安装
npm i --save react-roll-container
用法
1、整个页面采用CSS3垂直滚动
Component state = height: '100vh' { const height = thisstate return <MyJRoll height=height + 'px'> /*子组件*/ </MyJRoll> }
2、组件内部的子组件采用CSS3垂直滚动
Component state = height: 0 { this } { //主要是求出滚动区域的实际高度,如果已知实际高度是个固定值,则不需要设置state //如果实际高度需要根据一些特定的加减法求出来的,则通过state设置 //例如: const header = document this } { const height = thisstate return <div> <Header> 头部信息 </Header> <MyJRoll height=height + 'px'> <NavList /> </MyJRoll> </div> }
3、弹框组件采用CSS3垂直滚动
我们知道,在移动端做弹框内部的滚动的时候,会有点击穿透问题,如果采用MyJRoll组件来包装弹框,则不会有这个问题
4、更多使用场景需自行发现
可配置信息
height:这个是最重要的配置,因为浏览器需要知道你的滚动区域的实际高度,有时候js执行后计算高度不准确,可能是因为你的DOM还没有渲染完成,就像使用JQuery的时候要ready才能保证安全
maxHeight:通常你不需要管它
bgColor:用来设置滚动区域的背景色,默认是 '#f6f6f6'