辅捡输入自定义滚动条添加

src/components/AddAssistCheck/Textarea/index.jsx

@@ -1,6 +1,7 @@
 import React, { Component } from "react";
 import style from "./index.less";
 import config from '@config/index';
+import ScrollArea from 'react-scrollbar';
 import $ from 'jquery';
 
 class Textarea extends Component {
@@ -69,7 +70,24 @@ class Textarea extends Component {
   }
   render() {
     const {idx,disabled} = this.props;
-    return (
+    //出现滚动条时阻止滚动冒泡，未出现时不阻止，否则外部滚动条滚不动
+    const showedBar = $("#datePick .scrollbar-container").length===1;
+    const contStyle={
+      opacity:'0.4',
+      right:'0',
+      top:'1px',
+      zIndex:'15',
+      width:'8px',
+      background:'#f1f1f1'};
+    const barStyle={background:'#777',width:'100%'};
+    return (<ScrollArea speed={0.8}
+                        horizontal={false}
+                        stopScrollPropagation={showedBar?true:false}
+                        style={{maxHeight:'100px'}}
+                        className={style["area"]}
+                        verticalContainerStyle={contStyle}
+                        verticalScrollbarStyle={barStyle}
+                        contentClassName="content">
       <div className={style.textWap}>
         <div className={style.divTextarea}
             contenteditable={disabled?false:true}
@@ -78,7 +96,7 @@ class Textarea extends Component {
             onKeyUp={this.handleInput}
         ></div>
         <p ref={this.textInput} onClick={this.handleFocus} className={style.textareaWarring}></p>
-      </div>
+      </div></ScrollArea>
     );
   }
 }

src/components/AddAssistCheck/Textarea/index.less

@@ -1,7 +1,7 @@
 .divTextarea {
-  overflow-y: auto;
+  /*overflow-y: auto;*/
   overflow-x: hidden;
-  max-height: 100px;
+  /*max-height: 100px;*/
   border-bottom: 1px dashed #333;
   box-sizing: border-box;
   min-height: 21px;
@@ -14,6 +14,7 @@
   // z-index: 10;
   word-break: break-all;
   word-wrap:break-word;
+  padding-right: 6px;
 }
 .textWap {
   overflow: hidden;

src/components/AddAssistCheck/index.less

@@ -105,7 +105,7 @@
     }
 
     .textareaWrap {
-      padding-right: 250px;
+      padding-right: 245px;
       width: 100%;
     }
   }