[HTML/CSS] 스크롤 기능은 유지하면서 스크롤바 숨기기

overflow: hidden 속성으로 스크롤바를 숨길 수 있지만 스크롤 기능이 작동하지 않는다. 스크롤 기능은 작동하면서 스크롤바만 시각적으로 숨기려면 아래 스타일을 적용하면 된다(더 자세한 내용은 W3Schools 참고).

/* Chrome, Safari, Edge, ... */
.no-scrollbar::-webkit-scrollbar { 
    display: none;
  }

.no-scrollbar {
  -ms-overflow-style: none; /* IE */
  scrollbar-width: none; /* Firefox */
}

• ::-webkit-scrollbar : Blink, WebKit 렌더링 엔진 기반의 브라우저에서만 사용할 수 있다.
  ⚠️ 아직 표준이 아니므로 Production에서 사용할 땐 주의해야 한다.
• scrollbar-width : 파이어폭스에서만 사용할 수 있다
• -ms-overflow-style : IE에서만 사용할 수 있으며 ::-webkit-scrollbar 속성과 동일하다

 

렌더링 엔진

---

💡 Blink는 WebKit에서 파생된 렌더링 엔진이다. Chrome, Chromium도 Blink 분기(Fork) 전까진 WebKit을 사용했다. iOS, iPadOS에선 Chrome 등 모든 브라우저가 강제로 WebKit을 써야 한다 🤮.

 

• Blink 렌더링 엔진을 쓰는 브라우저 : Chrome, Opera(15+), Edge(79+), 네이버 웨일, 삼성 인터넷, …
  ✏️ Safari, Firefox, IE를 제외한 대부분의 브라우저가 Blink 렌더링 엔진을 사용한다고 볼 수 있다
• WebKit 렌더링 엔진을 쓰는 브라우저 : Safari, Maxthon(傲游), …
• Gecko 렌더링 엔진을 쓰는 브라우저 : Firefox 및 Firefox 변종 브라우저

 

CSS Prefixes (MDN)

---

💡 Chromium은 구글이 대표적인 후원자로 있는 오픈소스 프로젝트다. Chrome은 Chromium 기반에 사용자 편의 기능을 추가해서 만든 브라우저다. 자동 업데이트, 구글 계정 로그인 등은 Chrome엔 있지만 Chromium엔 없는 기능이다. 즉 Chrome과 Chromium은 같은 뿌리를 둔 다른 브라우저다(참고글).

 

• -webkit- : Chrome, Safari, Edge, Opera, iOS 브라우저 등 WebKit 및 Chromium 기반
• -moz- : Firefox
• -o- : 구버전 Opera(~14)
• -ms- : Internet Explorer, 구버전 Chromium(~27), 구버전 Microsoft Edge(~78)

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요