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

css3에서 스크롤 막대를 숨기는 방법은 [.element::-webkit-scrollbar { width: 0 !important } 와 같이 스크롤 막대 [::-webkit-scrollbar]의 의사 개체 선택기를 사용자 정의하는 것입니다. ].

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

우리는 직장에서 스크롤 막대를 숨기고 스크롤을 지원해야 하는 상황에 자주 직면하게 됩니다. 그렇다면 이런 상황에 직면했을 때 우리는 어떻게 해야 할까요? 아마도 많은 사람들의 첫 번째 반응은 iscroll 플러그인을 사용하는 것이지만 저는 이 기능을 구현하기 위해 CSS를 사용하는 것을 선호합니다. 아래에서 구체적인 방법을 살펴보겠습니다.

방법 1: 스크롤 막대의 너비를 계산하고 숨깁니다.

스크롤 막대를 위치시켜 숨기면 됩니다.

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

.outer-container{	
width: 360px;	
height: 200px;	
position: relative;	
overflow: hidden;
}.inner-container{	
position: absolute;	
left: 0;	
top: 0;	
right: -17px;	
bottom: 0;	
overflow-x: hidden;	
overflow-y: scroll;
}

이 코드는 교묘하게 17픽셀을 오른쪽으로 이동합니다. 이는 스크롤 막대의 너비와 정확히 같습니다. 이 값은 수동 디버깅을 통해 얻은 것입니다. 크롬과 IE에서는 문제가 발견되지 않았습니다.

방법 2: 세 개의 컨테이너로 둘러싸여 있으므로 스크롤 막대의 너비를 계산할 필요가 없습니다.

이 코드는 Microsoft 블로그에서 처음 본 코드입니다. , 내용을 상자로 제한합니다. 이렇게 하면 스크롤 막대가 표시되지 않고 계속 스크롤할 수 있습니다. 코드는 다음과 같습니다:

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

.element, .outer-container {
  width: 200px;
    height: 200px;
}
.outer-container {
  border: 5px solid purple;
    position: relative;
    overflow: hidden;
}.inner-container {  
position: absolute;  
left: 0;  
overflow-x: hidden;  
overflow-y: scroll;
}.inner-container::-webkit-scrollbar {  
display: none;
}

방법 3: CSS 숨겨진 스크롤 막대

사용자 정의 스크롤 막대::-webkit-scrollbar를 위한 의사 객체 선택기.

.element::-webkit-scrollbar { width: 0 !important }

IE 10+

.element { -ms-overflow-style: none; }

Firefox

.element { overflow: -moz-scrollbars-none; }

무료 학습 동영상 공유: css 동영상 튜토리얼

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