CSS와 HTML을 사용하여 스크롤 막대의 높이를 어떻게 사용자 정의할 수 있나요?

스크롤바 높이 사용자 정의

스크롤바 크기 제어

스크롤바 높이를 수정하려면 스크롤바의 구조를 이해해야 합니다. . 스크롤바의 구성 요소를 시각화하려면 아래 이미지를 참조하세요.

[스크롤바 구조 이미지]

크기를 변경하려면 두 가지 측면에 중점을 둡니다.

• 스크롤바 썸(5)이 스크롤을 시작하고 중지하는 위치 제어
• 기본 스크롤 트랙(3)을 사용하는 대신 가짜 스크롤 트랙 시뮬레이션

사용자 정의 스크롤바 생성

다음 코드를 고려하세요.

CSS:

<code class="css">.page {
  position: relative;
  width: 100px;
  height: 200px;
}

.content {
  width: 100%;
}

.wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  border: 1px solid #ddd;
}

.page::after {
  content: '';
  position: absolute;
  z-index: -1;
  height: calc(100% - 20px);
  top: 10px;
  right: -1px;
  width: 5px;
  background: #666;
}

.wrapper::-webkit-scrollbar {
  display: block;
  width: 5px;
}

.wrapper::-webkit-scrollbar-track {
  background: transparent;
}

.wrapper::-webkit-scrollbar-thumb {
  background-color: red;
  border-right: none;
  border-left: none;
}

.wrapper::-webkit-scrollbar-track-piece:end {
  background: transparent;
  margin-bottom: 10px;
}

.wrapper::-webkit-scrollbar-track-piece:start {
  background: transparent;
  margin-top: 10px;
}</code>

HTML:

<code class="html"><div class="page">
  <div class="wrapper">
    <div class="content">
      a<br/>
      a<br/>
      a<br/>
      a<br/>a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
    </div>
  </div>
</div></code>

이 코드:

• 페이지 요소의 다음 의사 요소를 사용하여 가짜 스크롤 트랙을 정의합니다.
• 래퍼 요소의 스크롤 막대에 적용된 CSS 속성을 사용하여 스크롤 막대의 너비, 배경 및 썸 색상을 사용자 정의합니다.
• 여백을 추가합니다. 스크롤 막대의 트랙 부분에 연결하여 스크롤 썸의 시작 및 끝 지점을 제어합니다.

이러한 변경 사항을 구현하면 디자인 요구 사항에 맞게 스크롤 막대의 높이를 수정할 수 있습니다.

위 내용은 CSS와 HTML을 사용하여 스크롤 막대의 높이를 어떻게 사용자 정의할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!