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行为驱动测试官方文档