node package manager
Painless code sharing. npm Orgs help your team discover, share, and reuse code. Create a free org »

@beisen/beisen-scroll-bar

beisen-scroll-bar

功能

BeisenScrollBar 

使用方法

import React, {Component, PropTypes} from 'react'
import {render} from 'react-dom'
import BeisenScrollBar from './src/index';
//引入必须的依赖之后,我们引入要嵌入的组件或者html,和样式文件。
import Containner from './src/outerComponent/containner';
import './src/style/componentClass.scss'

class Demo extends Component{

  handleScroll(scrollData){
      //这里我们可以获得坐标数据
      console.log(scrollData);
  }

  render () {

    //style可以设置滚动区域的整体样式。
    //当然支持手动加一个类,通过类名来控制样式(推荐)
    //contentClassName:为被包裹的内部页面套一个div,这里可以控制整个被嵌对象的样式。
    //handleScroll:回调函数,滚动时,实时获得滚动信息。
    //verticalScrollbarStyle:垂直滚动条的样式。
    //horizontalScrollbarStyle:水平滚动条的样式。

    let style = {'width':'300px','height':'300px'};
    let scrollbarStyles = {borderRadius: 5};
    return (
      <div>
          <BeisenScrollBar style={style} 
          className={'area'}
          contentClassName={'scrollContent'}
          handleScroll={this.handleScroll}
          verticalScrollbarStyle={scrollbarStyles}
          horizontalScrollbarStyle={scrollbarStyles}>
          
            <Containner />

          </BeisenScrollBar >
      </div>
    )
  }
}
render(<Demo />, document.getElementById('content'));

参考资料