CSS에서 스크롤 막대를 삭제하는 방법

CSS로 스크롤 막대 삭제: 1. 스크롤 막대의 너비를 계산하고 위치 지정을 통해 스크롤 막대의 위치를 ​​설정하고 스크롤 막대를 숨깁니다. 2. "::-webkit-scrollbar" 선택기 또는 "overflow" 속성을 사용하여 스크롤 막대를 삭제합니다.

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

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;
}

데모 주소: http://caibaojian.com/demo/2018/3/scroll2.html

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

Css 스크롤 막대 삭제 방법 2: ::-webkit-scrollbar 선택기 또는 오버플로 속성 사용

동시에 기사에서는 CSS를 통해 스크롤 막대를 숨기는 방법도 공유했는데 이 방법은 IE와 호환되지 않습니다. 모바일 사용자가 사용할 수 있습니다. 이는 사용자 정의 스크롤 막대::-webkit-scrollbar의 의사 객체 선택기입니다. 자세한 내용은 이전 문서인 CSS3 사용자 정의 웹킷 스크롤 막대 스타일 크롬 및 Safari

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

IE 10+

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

Firefox

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

를 참조하세요.

데모 주소: http://caibaojian.com/demo/2018/3/scroll4.html

(학습 영상 공유: css 영상 튜토리얼)

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