CSS에서 슬라이더를 숨기는 방법

CSS에서 슬라이더를 숨기는 방법은 [overflow:hidden]을 설정하는 것입니다. 스크롤바를 숨기고 내용이 넘칠 때 표시하려면 [overflow:auto]만 설정하면 됩니다.

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

먼저 스크롤바를 숨겼다가 콘텐츠가 넘칠 때 표시하고 싶다면, 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!