v6

src/components/HistoryCaseContainer/HistoryList/index.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import store from '@store';
 import styles from './index.less';
 import ReactDom from "react-dom";
@@ -21,7 +22,7 @@ import editHover from '../../../common/images/icon_edit_hover@2x.png';
 import del from '../../../common/images/icon_del_default@2x.png';
 import delHover from '../../../common/images/icon_del_hover@2x.png';
 import Notify from '@commonComp/Notify';
-
+import ScrollArea from 'react-scrollbar';
 class HistoryCaseContainer extends React.Component {
     constructor(props){
         super(props);
@@ -138,6 +139,11 @@ class HistoryCaseContainer extends React.Component {
                 return
               }
               this.handleCaseClick(0, items[0])
+              // this.$scrollRef.scrollArea.refresh();
+              // this.context.scrollArea.scrollYTo(40);
+              console.log(this.$scrollRef,'this.$scrollRef');
+              console.log(this.context,'this.context');
+              this.forceUpdate()
             }
           })
         }
@@ -321,6 +327,15 @@ class HistoryCaseContainer extends React.Component {
             jsonDataString.advice = dataStr[11] && dataStr[11].content || '';       //医嘱
             return jsonDataString;
         }
+      const contStyle = {
+        opacity: '0.4',
+        right: '0',
+        top: '1px',
+        zIndex: '15',
+        width: '14px',
+        background: '#f1f1f1'
+      };
+      const barStyle = { background: '#777', width: '100%' };
         return (
             <div className={styles.mainHistory} id="hisWrapMove">
                 <div className={`${styles.closeHis} drag-title`} id="closeHis"></div>
@@ -331,7 +346,18 @@ class HistoryCaseContainer extends React.Component {
                         <span className={styles.sort} onClick={this.handleSortClick}>排序 <img src={sort} alt="排序"/></span>
                     </div>
                     <div className={styles.lists}>
-                        <ul id="hislistLeft" ref={this.$scrollRef}>
+                <ScrollArea speed={0.8}
+                  key= {items.length}
+                  // ref={this.$scrollRef}
+                  horizontal={false}
+                  // stopScrollPropagation={items.length > 6 ? true : false}
+                  style={{ maxHeight: '722px' }}
+                  onScroll={(value) => {}}
+                  className={styles["area"]}
+                  verticalContainerStyle={contStyle}
+                  verticalScrollbarStyle={barStyle}
+                  contentClassName="content">
+                        <ul id="hislistLeft"   >
                             {(items && items.length > 0) ? items.map((val,idx)=>{
                                     // return <li key={val.id} className={val.id == activeHistory.id?styles.bgc:''} onClick={(e)=>{this.handleCaseClick(e,idx)}}>
                               return <li key={val.id} onClick={() => { this.handleCaseClick(idx, val) }} onMouseEnter={() => this.handleMouseEnterLi(idx)} onMouseLeave={() => this.handleMouseLeaveLi(idx)}>
@@ -360,6 +386,9 @@ class HistoryCaseContainer extends React.Component {
                                 }):<Empty message={'无历史病历'}></Empty>
                             }
                         </ul>
+
+                  </ScrollArea>
+
                     </div>
                 </div>
                 <div className={styles.mainHistoryRight}>

src/components/HistoryCaseContainer/HistoryList/index.less

@@ -50,7 +50,7 @@
         }
         .lists {
             box-sizing: border-box;
-            overflow-y: auto;
+            // overflow-y: auto;
             height: 100%;
            
             li {

src/components/SearchDrop/index.jsx

@@ -90,10 +90,11 @@ class SearchDrop extends Component{
         <ScrollArea speed={0.8}
                     horizontal={false}
                     stopScrollPropagation={data.length>6?true:false}
-                    style={{maxHeight:'180px'}}
+                    style={{height:'180px'}}
                     className={style["area"]}
                     verticalContainerStyle={contStyle}
                     verticalScrollbarStyle={barStyle}
+                    smoothScrolling= {true}
                     contentClassName="content">
           <ul>
             {data&&data.map((it)=>{