[React] 마우스로 드래그 스크롤 구현하기 - 라이브러리 O

마우스 버튼을 누르거나 터치하여 스크롤을 구현하는 React 컴포넌트 - wenyanet

---

프로젝트 진행 중 일반 사용자들을 고려 했을 때 세로 스크롤은 마우스의 휠을 사용하면 되지만 가로 스크롤의 경우 스크롤바가 있더라도 일일이 스크롤바를 눌러서 조정하는 건 사용성에 좋지 않다는 의견이 나와서 드래그 스크롤로 구현하게 되었다. (+ 가로 스크롤바도 보여줘서 가로 스크롤이 있다는 걸 시각적으로 보여줬다.)

---

과정

1) 라이브러리 설치

npm install --save react-indiana-drag-scroll

 

2) 아래 코드를 참고해서 변경 시켰다.

import React, { Component } from 'react'

import ScrollContainer from 'react-indiana-drag-scroll'

class Example extends Component {
  render () {
    return (
      <ScrollContainer className="scroll-container">
        { ... }
      </ScrollContainer>
    )
  }
}

 

3) 이때 기존에 구현 해뒀던 scroll bar가 사라졌다. > hideScrollbars 속성을 false로 추가 해줬다.

---

결과 (예시임)