CSS에서는 "::-webkit-scrollbar" 의사 클래스 선택기를 사용하여 스크롤 막대를 선택한 다음 "display:none" 스타일을 사용하여 스크롤 막대를 표시하지 않을 수 있습니다. 특정 구문 형식은 " ::-webkit-scrollbar" {디스플레이:없음;}".
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
::-webkit-scrollbar CSS 의사 클래스 선택기는 요소의 스크롤 막대 스타일에 영향을 미칩니다. 스크롤 막대를 숨기려면 ::-webkit-scrollbar 선택기 표시 속성을 없음으로 설정할 수 있습니다.
스크롤 막대가 표시되지 않도록 설정하는 방법:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style=" width:200px; height: 200px; overflow-y: scroll;">
cmcc</br>
cmcc</br>
cmcc</br>
cmcc</br>
cmcc</br>
cmcc</br>
cmcc</br>
cmcc</br>
cmcc</br>
cmcc</br>
cmcc</br>
cmcc</br>
cmcc</br>
cmcc</br>
</div>
</body>
</html>렌더링:
CSS 효과를 설정하기 전:
CSS 스타일을 추가한 후:
Code
<style>
::-webkit-scrollbar {display:none}
</style>Css를 사용하여 스크롤 막대를 표시하지 않도록 설정 효과를 표시하려면:
css 스크롤바 선택기:
::-webkit-scrollbar — 전체 스크롤바
::-webkit-scrollbar-button — 스크롤바의 버튼(위 및 아래) 화살표)
: :-webkit-scrollbar-thumb — 스크롤 슬라이더의 스크롤 막대
::-webkit-scrollbar-track — 스크롤 막대 트랙
::-webkit-scrollbar-track-piece — 슬라이딩되지 않는 스크롤 막대 블록의 트랙 부분
::-webkit-scrollbar-corner — 수직 및 수평 스크롤 막대가 모두 있을 때 만나는 부분
::-webkit-resizer — 부분 특정 요소 스타일의 모서리 부분(예: 텍스트 영역의 드래그 가능한 버튼)
추천 학습: css 비디오 튜토리얼
위 내용은 CSS에서 스크롤바를 표시하지 않게 하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!