CSS에서 스크롤바 스타일을 제거하는 방법

CSS에서 스크롤 막대 스타일을 제거하는 방법은 스크롤 막대에 대해 [overflow:hidden] 스타일을 설정하고 스크롤 막대를 완전히 숨기는 것입니다. 예를 들어 [::-webkit-scrollbar {display: none /* Chrome; 사파리 */} ].

이 기사의 운영 환경: windows10 시스템, CSS 3, thinkpad t480 컴퓨터.

스크롤 막대 스타일을 제거하려면 스크롤 막대 제거 목적을 달성하기 위해 실제로 숨기도록 선택할 수 있습니다.

스크롤 막대를 숨기고 콘텐츠가 넘칠 때 표시해야 하는 경우 Overflow: 자동 스타일을 설정하면 됩니다. 스크롤 막대를 완전히 숨기려면 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!