自定义滚动条测试 reactScroller

package.json

@@ -70,6 +70,7 @@
     "koa2-cors": "^2.0.6",
     "log4js": "^3.0.4",
     "react-redux": "4.4.9",
+    "react-scrollbar": "^0.5.6",
     "react-server": "^0.8.1",
     "redux": "3.5.2",
     "redux-thunk": "2.2.0"

src/common/components/ItemBox/index.less

@@ -24,6 +24,7 @@
     padding:5px;
     outline: none;
     border-bottom:1px @part-border-color dashed;
+    padding-right: 438px;
     /*border-radius: 4px;*/
   }
   .border {

src/common/components/NumberPan/index.jsx

@@ -52,16 +52,15 @@ class NumberPan extends Component{
   getStyle(){
     const {left,top,show} = this.props;
     return {
-      left:left?left+'px':'0',
-      top:top?top+'px':'0',
+      /*left:left?left+'px':'0',
+      top:top?top+'px':'0',*/
       display:show?'table':'none'        //table onBlur阻止冒泡是为了修复multSpread中数字键盘点击触发最外层数字组件onBlur事件
     }
   }
   render(){
     const select = this.handleSelect;
     const domNode = document.getElementById('root');
-    return ReactDom.createPortal(
-       <div className={style['panBox']} 
+    return <div className={style['panBox']}
                 style={this.getStyle()}
                 onBlur={(e)=>e.stopPropagation()} 
                 onDoubleClick={(e)=>e.stopPropagation()}>
@@ -92,7 +91,6 @@ class NumberPan extends Component{
         </tr>
       </table>
       </div>
-    ,domNode)
   }
 }
 

src/common/components/NumberUnitPan/index.jsx

@@ -61,8 +61,8 @@ class NumberUnitPan extends Component{
   getStyle(){
     const {left,top,show} = this.props;
     return {
-      left:left?left+'px':'0',
-      top:top?top+'px':'0',
+      /*left:left?left+'px':'0',
+      top:top?top+'px':'0',*/
       display:show?'table':'none'
     }
   }
@@ -76,8 +76,7 @@ class NumberUnitPan extends Component{
   }
   render(){
     const domNode = document.getElementById('root');
-    return ReactDom.createPortal( 
-      <div className={style['panBox']} onBlur={(e)=>e.stopPropagation()} style={this.getStyle()}>
+    return <div className={style['panBox']} onBlur={(e)=>e.stopPropagation()} style={this.getStyle()}>
         <table className={style['pan']} >
         <tr>
           <td><span onClick={this.handleSelect}>1</span></td>
@@ -117,7 +116,6 @@ class NumberUnitPan extends Component{
         </tr>
       </table>
       </div>
-    ,domNode)
   }
 }
 

src/components/EMRContainer/index.jsx

@@ -11,6 +11,7 @@ import OperationContainer from '../../containers/OperationContainer'
 import style from './index.less';
 import AdviceContainer from '../../containers/AdviceContainer';
 import InfoTitle from '@components/InfoTitle'
+import ScrollArea from 'react-scrollbar';
 import {getWindowInnerHeight,getWindowInnerWidth,windowEventHandler} from '@utils/tools';
 
 class EMRContainer extends Component {
@@ -18,7 +19,7 @@ class EMRContainer extends Component {
         super(props);
         this.$cont = React.createRef();
     }
-    componentDidMount(){
+    /*componentDidMount(){
         // const {initHospital} = this.props;
         // initHospital()
         const height = getWindowInnerHeight() - 175;
@@ -33,10 +34,16 @@ class EMRContainer extends Component {
             this.$cont.current.style.width = width + "px";
           }
         });
-    }
+    }*/
     render() {
-        return <div className={style['EMR-container']} ref={this.$cont} id="addScrollEvent">
-            <InfoTitle></InfoTitle>
+        return <div className={style['EMR-container']} id="addScrollEvent">
+          <ScrollArea speed={0.8}
+                      ref={this.$cont}
+                      horizontal={false}
+                      className={style["area"]}
+                      verticalContainerStyle={{opacity:'0.5',right:'459px'}}
+                      contentClassName="content">
+          <InfoTitle></InfoTitle>
             <div className={style['inner']}>
                 <MainSuit></MainSuit>
                 <CurrentIll></CurrentIll>
@@ -50,6 +57,7 @@ class EMRContainer extends Component {
                 <AdviceContainer></AdviceContainer>
             </div>
             <OperationContainer></OperationContainer>
+          </ScrollArea>
         </div>
     }
 }

src/components/EMRContainer/index.less

@@ -1,7 +1,11 @@
 @import "~@less/variables.less";
+.area{
+   height: 350px;
+ }
+
 .EMR-container{
   background: #fff;
-  margin-top: 60px;
+  margin:60px 20px 0 0;
   // margin-right:@push-width + 10px;
   padding: 0px 0 10px 0 ;
   box-sizing: border-box;

src/components/NumberDrop/index.jsx

@@ -217,6 +217,7 @@ class NumberDrop extends Component{
     const {prefix,suffix,show,value,handleHide,allClick} = this.props;
     const {placeholder,hasSelect,boxTop,boxLeft} = this.state;
     return <div className={this.getClasses()}
+                style={{position:'relative'}}
                 onClick={allClick?this.handleNumClick:null}>
       <span>{prefix}</span>
       <span onFocus={this.handleNumFocus}
@@ -230,6 +231,10 @@ class NumberDrop extends Component{
             className={this.getSpanClass()}
             >&nbsp;{value||placeholder}</span>
       <span>{suffix}</span>
+      {/*<div style={{width:'500px',
+        height:'200px',
+        background:'#ccc',
+        position:'absolute',top:'0',zIndex:'300'}}>sss</div>*/}
       <NumberPan handleSelect={this.select.bind(this)}
                  onClose={handleHide}
                  show={show}

src/components/PushContainer/index.less

@@ -2,7 +2,7 @@
 
 .container{
   background: #fff;
-  width: @push-width;
+  width: 460px;/*@push-width;*/
   float: right;
   padding-top: 20px;
   z-index: 200;
@@ -12,6 +12,7 @@
   // bottom: 10px;
   // right: 10px;
   padding-bottom:50px;
+  border-left: 10px #e4e6e7 solid;
 }
 .title{
   color:#666;