Scrollbar滚动条组件的实现
div滚动条可以做多个区块的多内容展示
使用方式:
import Scrollbar from '../common/scrollbar' <Scrollbar className={styles.body} scroll={this.onScroll}> {内部内容} </Scrollbar>
引入直接使用,内部是要展示的长内容
styles.body设置区块占用宽高,scroll是滚动到底部时才进行触发,一般用于做滚动加载下一页数据关于滚动加载,可在之后文章加入。
先看实现:
div的onScroll滚动事件,当滚动到距离底部50px以内时触发外部传入的scroll里面的事件。
Scrollbar内部的dom节点会显示在children中。
import React from "react"; export default class Scrollbar extends React.Component { onScroll = () => { const parentHeight = this.scrollbar.offsetHeight || this.scrollbar.innerHeight; const childrenHeight = this.view.offsetHeight; const scrollTop = this.scrollbar.scrollTop; const {scroll} = this.props; childrenHeight - parentHeight - scrollTop < 50 && scroll && scroll(); }; render() { const {className, children} = this.props; return <div className={className} ref={ref => this.scrollbar = ref} onScroll={this.onScroll.bind(this)}> <div ref={ref => this.view = ref}> {children} </div> </div> } }
博客园作者:herry菌朋友,看到这里,关注作者的公众号吧,不漏掉更新哦
![]()