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

醉折花枝作酒筹
풀어 주다: 2023-01-06 11:16:01
원래의
14437명이 탐색했습니다.

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

관련 라벨:
css
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿