스크롤바 숨김 마스터: 사용자 경험 향상

소개

이 랩에서는 CSS 를 사용하여 스크롤바를 숨기면서도 요소가 스크롤 가능하도록 하는 개념을 탐구합니다. overflow: auto 속성을 사용하여 스크롤을 활성화하고, Firefox 에서는 scrollbar-width: none을 사용하여 스크롤바를 숨기며, WebKit 브라우저에서는 ::-webkit-scrollbar 의사 요소에 display: none을 사용하여 스크롤바를 숨깁니다. 이 랩은 스크롤 가능한 요소의 사용자 경험을 향상시키기 위해 이 CSS 기술을 구현하는 실습 경험을 제공합니다.

이것은 가이드 실험입니다. 학습과 실습을 돕기 위한 단계별 지침을 제공합니다.각 단계를 완료하고 실무 경험을 쌓기 위해 지침을 주의 깊게 따르세요. 과거 데이터에 따르면, 이것은 초급 레벨의 실험이며 완료율은 100%입니다.학습자들로부터 100%의 긍정적인 리뷰율을 받았습니다.

스크롤바 숨기기

index.html 및 style.css는 이미 VM 에 제공되었습니다.

스크롤바를 숨기면서 요소가 스크롤 가능하도록 하려면 다음 단계를 따르세요.

overflow: auto를 사용하여 요소에서 스크롤을 활성화합니다.
Firefox 에서 스크롤바를 숨기려면 scrollbar-width: none을 사용합니다.
WebKit 브라우저 (Chrome, Edge, Safari 등) 에서 스크롤바를 숨기려면 ::-webkit-scrollbar 의사 요소에 display: none을 사용합니다.

다음은 구현 예시입니다.

<div class="scrollable">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean interdum id
    leo a consectetur. Integer justo magna, ultricies vel enim vitae, egestas
    efficitur leo. Ut nulla orci, rutrum eu augue sed, tempus pellentesque quam.
  </p>
</div>

.scrollable {
  width: 200px;
  height: 100px;
  overflow: auto;
  scrollbar-width: none;
}

/* Hide scrollbars on WebKit browsers */
.scrollable::-webkit-scrollbar {
  display: none;
}

오른쪽 하단의 'Go Live'를 클릭하여 포트 8080 에서 웹 서비스를 실행하세요. 그런 다음, Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

요약

축하합니다! 스크롤바 숨기기 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.