아무거나

React + Typescript Scroll Down 구현 본문

Javascript & HTML & CSS/reactjs

React + Typescript Scroll Down 구현

전봉근 2020. 3. 21. 15:35
반응형

Scroll Down 구현

  // Render DOM
  // ref가 지정된 곳으로 포커싱이 될 예정이다.
  forEach({
      ....

      <input
      ...
      ref={this.refElement}
      ...
      />
  })

  // 스크롤 다운 함수
  async handleScrollDown() {  
      if (this.scrollLocationRef && this.scrollLocationRef.current) {    
          this.scrollLocationRef.current.scrollIntoView({      
              behavior: 'smooth',      
              block: 'start'    
          })  
      }
  }

  // 실행되는 함수
  // 동적 추가할 때 마다 새로 생성된 행의 Ref를 찾을 수 없어서 우선 재귀함수로 해결.. (__)
  this.handleScrollDown().then(() => {
      this.handleScrollDown().then(() => {})
  })
반응형
Comments