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

스크롤 막대를 숨기는 방법: 먼저 "::-webkit-scrollbar" 의사 클래스 선택기를 사용하여 요소의 스크롤 막대를 선택한 다음 "display:none;" 스타일을 사용하여 스크롤 막대를 숨깁니다. 구체적인 구문 형식은 "::- webkit-scrollbar{display:none;}"입니다.

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

사용자 정의 스크롤 막대::-webkit-scrollbar의 의사 개체 선택기를 사용하여 숨겨진 스크롤 막대를 설정할 수 있습니다.

스크롤 막대 CSS 코드를 숨기려면 이 의사 클래스 선택기를 사용하세요.

.element::-webkit-scrollbar {display:none}

다른 PC 브라우저(IE, Firefox 등)와 호환되도록 하려면 다음 방법을 사용할 수 있습니다. Overflow:hidden을 사용하여 컨테이너 외부에 다른 레이어를 중첩한 다음 내부 콘텐츠의 크기를 외부 중첩 레이어와 동일한 크기로 제한하여 위장하여 숨겨집니다.

<div class="outer-container">
     <div class="inner-container">
        <div class="content">
            ......
        </div>
     </div>
 </div>

css 코드:

.outer-container,.content {
	width: 200px; 
	height: 200px;
}
.outer-container {
    position: relative;
    overflow: hidden;
}
.inner-container {
    position: absolute; 
    left: 0;
    overflow-x: hidden;
    overflow-y: scroll;
}
 /* for Chrome */
.inner-container::-webkit-scrollbar {
    display: none;
}

추천 학습: css 동영상 튜토리얼

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