CSS에서 스크롤바를 표시하지 않게 하는 방법-CSS 튜토리얼-php.cn

CSS에서 스크롤바를 표시하지 않게 하는 방법

醉折花枝作酒筹

풀어 주다： 2023-01-06 11:16:01

원래의

14470명이 탐색했습니다.

CSS에서는 "::-webkit-scrollbar" 의사 클래스 선택기를 사용하여 스크롤 막대를 선택한 다음 "display:none" 스타일을 사용하여 스크롤 막대를 표시하지 않을 수 있습니다. 특정 구문 형식은 " ::-webkit-scrollbar" {디스플레이:없음;}".

CSS에서 스크롤바를 표시하지 않게 하는 방법

이 튜토리얼의 운영 환경: 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에서 스크롤바를 표시하지 않게 하는 방법

CSS 스타일을 추가한 후:

Code

<style>
     ::-webkit-scrollbar {display:none}
</style>

로그인 후 복사

Css를 사용하여 스크롤 막대를 표시하지 않도록 설정 효과를 표시하려면:

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!