@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'));

参考资料

• 北森前端TalentUI开发文档

• React官方文档

• ES6语法

• Jasmine行为驱动测试官方文档