CSS에서 스크롤을 숨기는 방법

CSS에서 스크롤을 숨기는 방법: 1. Firefox에서는 "scrollbar-width: none; /* Firefox */" 속성을 통해 스크롤 막대를 숨길 수 있습니다. 2. IE 브라우저에서는 "-ms-"를 사용할 수 있습니다. 접두사 " 속성은 스크롤 막대 스타일을 정의합니다. 3. Chrome 및 Safari에서는 CSS 스크롤 막대 선택기를 사용한 다음 "display:none"을 통해 숨길 수 있습니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3 버전, DELL G3 컴퓨터

css 스크롤을 숨기는 방법은 무엇입니까?

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

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

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

Firefox 브라우저

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

scrollbar-width: none; /* Firefox */

IE browser

IE의 경우 -ms-prefix 속성 정의를 사용해야 합니다. 스크롤바 스타일:

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

Chrome 및 Safari

Chrome 및 Safari의 경우 CSS 스크롤바 선택기를 사용한 다음 디스플레이:없음:

::-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 중국어 웹사이트의 기타 관련 기사를 참조하세요!