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

방법: 1. "scrollbar-width:none;" 구문을 사용하여 스크롤 막대 너비를 없음으로 설정합니다. 2. "-ms-overflow-style:none;"을 사용합니다. -스크롤바 {display:none}" 문.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

모든 요소를 ​​스크롤하면서 스크롤 막대를 숨기는 방법은 무엇입니까?

먼저 스크롤바를 숨겼다가 콘텐츠가 넘칠 때 표시하고 싶다면, 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 */
}

을 사용하여 숨겨야 합니다. 참고: 숨기고 싶을 때 스크롤을 사용할 때 막대의 경우 오버플로 표시를 자동으로 설정하거나 콘텐츠를 스크롤할 수 있도록 스크롤하는 것이 가장 좋습니다.

예

위의 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 동영상 튜토리얼)

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