CSS에서 스크롤 막대 너비를 설정하는 방법

CSS에서는 "::-webkit-scrollbar" 선택기와 너비 속성을 사용하여 스크롤 막대 너비를 설정할 수 있습니다. 구문은 "::-webkit-scrollbar{width: width value;}"입니다. 전체 스크롤 막대를 선택하는 데 사용되며 width 속성은 선택한 요소의 너비를 설정하는 데 사용됩니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3&&HTML5 버전, thinkpad t480 컴퓨터.

방법 아이디어는 다음과 같습니다.

CSS의 ::-webkit-scrollbar 의사 클래스 선택기를 사용하여 스크롤 막대 스타일을 설정하고 이 의사 클래스 선택기의 너비 속성을 통해 스크롤 막대의 너비를 설정합니다. .

::-webkit-scrollbar CSS 의사 클래스 선택기는 요소의 스크롤 막대 스타일에 영향을 미칩니다.

다음 의사 요소 선택기를 사용하여 다양한 웹킷 브라우저의 스크롤 막대 스타일을 수정할 수 있습니다.

::-webkit-scrollbar — 전체 스크롤 막대

::-webkit-scrollbar-button — 웹킷의 버튼 스크롤 막대(위쪽 및 아래쪽 화살표)

::-webkit-scrollbar-thumb — 스크롤 막대의 스크롤 슬라이더

::-webkit-scrollbar-track — 스크롤 막대 트랙

::-webkit-scrollbar-track- 조각 — 스크롤 슬라이더가 없는 막대의 트랙 부분

::-webkit-scrollbar-corner — 수직 및 수평 스크롤 막대가 모두 있을 때 만나는 부분

::-webkit-resizer — 모서리의 부분 스타일 일부 요소의 일부(예: 텍스트 영역의 드래그 가능한 버튼)

구현 코드:

.visible-scrollbar, .invisible-scrollbar, .mostly-customized-scrollbar {
  display: block;
  width: 10em;
  overflow: auto;  
  height: 2em;
  }
  .invisible-scrollbar::-webkit-scrollbar {
  display: none;
  }
  /* Demonstrate a "mostly customized" scrollbar
 * (won't be visible otherwise if width/height is specified) */
 .mostly-customized-scrollbar::-webkit-scrollbar {
  width: 5px;  
  height: 8px;  
  background-color: #aaa; 
  /* or add it to the track */}/* Add a thumb */
  .mostly-customized-scrollbar::-webkit-scrollbar-thumb {
    background: #000; 
    }

관련 권장 사항: CSS 튜토리얼

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