react中盒子内平滑滚动，监测盒子滚动条状态

Html

            <div className="content-layer">
              <div className="module0 module-base">
                <CarRegister pageQuery={pageQuery} jumpModule={this.handleStep} />
                {/* <div className='module-mask'></div> */}
                <div className={[hasOrderNumber ? 'module-mask' : '']}></div>
              </div>
              <div className="module1 module-base">
                <WorkOrder pageQuery={pageQuery} jumpModule={this.handleStep}/>
                <div className={[!hasOrderNumber ? 'module-mask' : '']}></div>
              </div>
              <div className="module2 module-base">
                <MoreMessage pageQuery={pageQuery} jumpModule={this.handleStep}/>
                <div className={[!hasOrderNumber ? 'module-mask' : '']}></div>
              </div>
              <div className="module3 module-base">
                <AuditOrder pageQuery={pageQuery} jumpModule={this.handleStep}/>
                <div className={[!hasOrderNumber ? 'module-mask' : '']}></div>
              </div>
            </div>

function平滑滚动

  handleStep = (stepNumber)=>{
    this.boxScroll('content-layer',`module${stepNumber}`)
  }
    //平滑滚动
  boxScroll =(targetParent,target)=>{
      const parentPart =  document.querySelector('.' + targetParent); // 目标父节点class
      const part = document.querySelector('.' + target); // 目标节点class
      if(part){
          const partTop = part.offsetTop;//目标元素的距离父节点的高度
          const scrollNow = parentPart.scrollTop;//父节点目前的滚动条位置
          const scrollTarget = partTop - 148;//滚动条目标位置
          const distance = scrollTarget - scrollNow;//目标距离当前的位置
          
          const startTime = +new Date();
          const duration = 500; //ms
          
          if(Math.abs(distance) >= 5){
            function run() {
                const time = +new Date() - startTime;
                const step = distance * (time / duration);
                parentPart.scrollTo(0, scrollNow + step);
                run.timer = requestAnimationFrame(run);

                if (time >= duration) {
                    parentPart.scrollTo(0, scrollTarget);
                    cancelAnimationFrame(run.timer);
                }
            } 
            requestAnimationFrame(run);
          }
      }
    }

设置监听滚动条滚动

    //监听滚动，设置步骤条
    setTimeout(()=>{
      const parentPart =  document.querySelector('.content-layer');
      if(orderNumber){
        this.handleStep(1)
        // const parentPart =  document.querySelector('.' + targetParent);
        // parentPart.scrollTop = 
      }
      parentPart.addEventListener('scroll', this.bindHandleScroll)
    },1000)
    //监听方法
  bindHandleScroll = (event)=>{
    let {stepNumber} = this.props.ServiceOrderOpen;
    let scrollTop = event.target.scrollTop;
    let numberArr = [0,1,2,3];
    let lastNumber = 0;
    numberArr.map((item)=>{
      let target =  document.querySelector(`.module${item}`);
      let targetTop = target.offsetTop - 148;
      if(scrollTop+3>=(targetTop)){
        lastNumber = item;
      }
    })
    if(stepNumber!=lastNumber){
      this.props.dispatch({
        type: 'ServiceOrderOpen/setStepNumber',
        payload: {stepNumber: lastNumber},
      });
    }
  }