Input Range Slider 스크롤

Input range slider 스크롤 문제

<input type=range min="1" max="6" ... />

스크롤되는 화면에 input으로 만든 range slider가 있다면 문제가 있다. range slider에서 범위를 선택할 때 화면도 함께 스크롤되는 것이다.

회사 프로젝트는 모바일용 웹이어서 ANDROID와 IOS에서 터치(스크롤)가 되도록 해결해야 했다.

1. IOS

html, body, #root {
  -webkit-overflow-scrolling: touch;
  overflow: scroll;
}

위의 속성만 추가하면 된다. index.scss와 같은 스타일 문서에 적용해주면 IOS에서는 문제가 해결된다.

그러나, ANDROID에서는 위의 css 속성을 추가해도 문제가 해결되지 않았다.

2. ANDROID

componentDidMount() {
  window.addEventListener('touchstart', this.handleOutsideClick);
}

componentWillUnmount() {
  this.nv.removeEventListener('touchstart', this.handleOutsideClick);
}

handleOutsideClick  = (e) => {
  if (this.nv  !==  null) {
    if (this.nv.contains(e.target)) {
      document.body.style.overflow  =  'hidden';
    } else {
      document.body.style.overflow  =  'scroll';
    }
  }
}

<input ref={el => this.nv = el} type="range" ... />

위의 코드를 추가해주면 ANDROID에서도 문제가 해결된다.