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

모바일 버전

모바일 페이지는 Chrome 및 Safari와만 호환되어야 하므로 맞춤 스크롤 막대::-webkit-scrollbar의 의사 클래스 선택기를 사용하여 스크롤 막대를 숨길 수 있습니다.

.container::-webkit-scrollbar {
  display: none;
}

(권장 튜토리얼: CSS 튜토리얼)

PC 쪽

PC 쪽은 호환성에 대한 요구 사항이 상대적으로 높기 때문에 다른 방법을 사용할 수 있습니다. 일반적인 아이디어는 콘텐츠 div div 외부에 상위 컨테이너를 래핑하고 설정하는 것입니다. overflow:hidden,content div setdisplay-x:hidden;display-y:auto;마지막으로 상위 컨테이너 div의 너비를 콘텐츠 div의 너비보다 작게 설정하거나 콘텐츠 div의 오른쪽 여백을 다음과 같이 설정합니다. 음수 값.

<div class="outer">
    <div class="content">
      <p>1111</p>
      <p>222</p>
      <p>333</p>
      <p>444</p>
    </div>
</div>
 .outer {
   width: 300px;
   height: 300px;
   overflow: hidden;
  
   .content {
     width: 330px;
     /*margin-right: -15px;*/
     height: 100%;
     overflow-x: hidden;
     overflow-y: auto;
     background: red;
     padding-top: 100px;
  
     p:not(:first-child) {
       margin-top: 100px;
     }
   }
 }

추천 관련 비디오 튜토리얼: css 비디오 튜토리얼

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