div CSS에서 스크롤 막대를 숨기는 방법: 1. 스크롤 막대의 너비를 계산하고 숨깁니다. 2. 스크롤 막대의 너비를 계산하지 않고 세 개의 컨테이너로 둘러쌉니다. 3. 의사 객체 선택기를 사용자 정의합니다. 스크롤 막대 "::-webkit-scrollbar".
이 기사의 운영 환경: Windows7 시스템, HTML5&&CSS3 버전, Dell G3 컴퓨터.
스크롤 막대를 숨기고 콘텐츠를 스크롤하기 위해 CSS를 구현하는 3가지 방법
스크롤 막대를 숨기고 스크롤도 지원해야 합니다. 우리는 프런트 엔드 개발에서 이러한 상황에 자주 직면하게 됩니다. 가장 쉽게 생각할 수 있는 것은 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로 스크롤 막대 숨기기
동시에 기사에서는 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; }자세한 HTML/CSS 지식을 보려면 다음 페이지를 방문하세요. CSS 동영상 튜토리얼 칼럼!
위 내용은 div CSS에서 스크롤 막대를 숨기는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!