간단한 스크롤바 없애기 + 드래그 기능 (tailwind)

🤔  PC 화면에서는 모든 컨텐츠를 보여주지만 모바일 화면에서 특정 컨텐츠를 드래그하면서 스크롤바를 안보이게 하는작업

구글링을 통해 구현하려다가 간단하게 구현할 방법이 없을까 고민해보았다

 

참고한 블로그

https://jihyundev.tistory.com/33

리액트로 만들어보는 마우스 드래그 좌우스크롤 컴포넌트

https://wnsdufdl.tistory.com/518

🧐 라이브러리를 활용

https://www.npmjs.com/package/tailwind-scrollbar-hide

 

PC 및 모바일 화면에서 드래그 기능과 스크롤바를 없애주는 기능을 가지고있고 내 기준에서 충돌도 없는 라이브러리

😆  반응형 웹을 위한 코드 설명

<div className="flex xl:w-full overflow-x-auto xl:overflow-x-hidden 
scrollbar-hide xl:scrollbar-default">
	<div/>
	<div/>
	<div/>
    <div/>
... div들
</div>

 

먼저 중요한점은 이렇게만 작성하면 작동하지 않는다

이유는 xl 1280px 이전일때 가로의 크기가 고정되지 않기때문

그렇다고 가로 크기를 고정으로 만들게 되면 overflow-x-auto가 제대로 작동하지 않을거같아서

각 div에 크기를 고정으로 넣어줬다

ex)min-w-10

 

tailwind를 설명하자면

flex 가로정렬

xl:w-full 을 설정해줘야지 반응형 페이지 PC화면에서 디자인이 무너지지않는다

overflow-x-auto scroll hidden 옵션의 맞춤형 크기에 따라서 스크롤 여부를 판단한다

scrollbar-hide 이 한단어로 드래그와 스크롤바를 모두 없앨 수 있다 

추가로 생성한 xl:들은 혹시 몰라서 작성했지만 작성하지 않아도 무방하다

 

이로써 간편하게 라이브러리를 활용해서 드래그를 만들어보았다

 

💪 출처 및 도움주신분들

 

https://github.com/reslear/tailwind-scrollbar-hide

​