HTML CSS에서 스크롤 막대를 숨기는 방법

html css에서 스크롤 막대를 숨기는 방법: 1. Firefox의 경우 "scrollbar-width: none;"을 통해 숨깁니다. 2. IE의 경우 "-ms-overflow-style: none;"을 통해 숨깁니다.

이 기사의 운영 환경: Windows7 시스템, HTML5&&CSS3 버전, Dell G3 컴퓨터.

html CSS에서 스크롤 막대를 숨기는 방법?

CSS를 사용하여 요소 스크롤 막대 숨기기

모든 요소에서 스크롤할 수 있으면서도 스크롤 막대를 숨기는 방법은 무엇입니까?

먼저 스크롤바를 숨겼다가 콘텐츠가 넘칠 때 표시하고 싶다면, Overflow:auto 스타일만 설정하면 됩니다. 스크롤 막대를 완전히 숨기려면 Overflow:hidden을 설정하면 됩니다. 하지만 이렇게 하면 요소 콘텐츠를 스크롤할 수 없게 됩니다. 현재로서는 콘텐츠를 스크롤하는 동안 요소가 스크롤 막대를 숨길 수 있도록 허용하는 CSS 규칙이 없습니다. 이는 특정 브라우저에 대한 스크롤 막대 스타일을 설정해야만 가능합니다.

Firefox 브라우저

Firefox의 경우 스크롤 막대 너비를 없음으로 설정할 수 있습니다.

scrollbar-width: none; /* Firefox */

IE 브라우저

IE의 경우 -ms-prefix 속성을 사용하여 스크롤 막대 스타일을 정의해야 합니다.

-ms-overflow-style: none; /* IE 10+ */

Chrome 및 Safari

Chrome 및 Safari의 경우 CSS 스크롤 막대 선택기를 사용한 다음 display:none:

::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

참고: 스크롤 막대를 숨기고 싶을 때 가장 좋습니다. 오버플로 표시를 다음으로 설정하세요. 콘텐츠가 스크롤 가능한지 확인하려면 자동 또는 스크롤을 사용하세요.

Example

위의 CSS 속성과 오버플로를 사용하여 다음 예를 구현합니다. 즉, 수직 스크롤 막대를 허용하면서 가로 스크롤 막대를 숨깁니다.

.demo::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.demo {
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  overflow-x: hidden;
  overflow-y: auto;
}

권장 학습: "css video tutorial"

위 내용은 HTML CSS에서 스크롤 막대를 숨기는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!