모바일 웹에서 스크롤 표시 어떻게 없앨까요? 스크롤 잔상 없애는 방법!

아휴, 스크롤 잔상 좀 없애주세요

일발적인 스크롤은 커스텀으로 디자인하지 않으면 브라우저 기본 스크롤인 회색의 클래식한 막대바이다. 하지만 모바일에서는 막대바 대신 스크롤을 할 때 투명하게 보이는데 때론 이 막대바를 가려야할 때가 있다.

BUT!!!

모바일 웹으로 들어가면 스크롤 잔상이 나오는 것을 없애는 방법에 대해서는 많이 알려지지 않았다. (방법을 알고 있다면 조용히 창을 닫고 나가고 아래 글을 읽어볼 필요는 없다.)

물론 stackoverflow에 검색하면 찾을 수도 있겠지만 약간의 삽질을 한 경위를 소개하고자 한다.

문제(Problem)

overflow로 스크롤을 주는데 잔상이 남으면서 스크롤이 보인다. 스크롤 잔상을 없애라!

해결(Solve)

• .scroll_conateiner에 들어간 클래스는 IE와 엣지, 파이어폭스에서 스크롤바를 없애는 스타일이다.
• ::webkit-scrollbar는 ios13까지는 display:none가 없어도 가능했다. ios14로 업데이트되면서 스크롤이 보이지만 display:none를 하면 보이지 않고 '터치스크롤'만 먹는다.
• 이 코드는 다 넣을 시 일반 브라우저에 스크롤도 없어지기 때문에 미디어 쿼리로 구간별로 조절을 하던가 스크립트로 해당클래스에 넣어주거나 하는 등 응용을 해야한다.

  .scroll_container{
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
  }
  
  .scroll_container::-webkit-scrollbar{
  display: none;
  width: 0;  /* Remove scrollbar space */
  height: 0;
  background: transparent;  /* Optional: just make scrollbar invisible */
  -webkit-appearance: none;
  }