웹 개발에서 높이가 감소된 사용자 정의 스크롤바를 만드는 방법은 무엇입니까?

스크롤 막대 높이를 조정하는 방법

이 경우 스크롤 막대의 모양, 특히 높이를 조정하여 사용자 정의하는 방법에 대해 논의합니다. 이를 달성하려면 아래 그림과 같이 스크롤바의 구조를 이해해야 합니다.

<code class="css">::-webkit-scrollbar { /* 1 */ }
::-webkit-scrollbar-button       { /* 2 */ }
::-webkit-scrollbar-track        { /* 3 */ }
::-webkit-scrollbar-track-piece  { /* 4 */ }
::-webkit-scrollbar-thumb        { /* 5 */ }
::-webkit-scrollbar-corner       { /* 6 */ }
::-webkit-resizer                { /* 7 */ }</code>

목표는 두 가지입니다. 스크롤 막대 썸(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>

이 코드는 실제 스크롤 막대보다 짧게 보이는 가짜 스크롤 막대를 생성하여 높이가 조정된 것처럼 보이게 합니다. ::-webkit-scrollbar-track 요소는 원래 스크롤바를 숨기는 데 사용되는 반면, ::after 의사 요소는 가짜 스크롤바를 생성합니다. ::-webkit-scrollbar-thumb 요소는 더 짧은 스크롤바 썸 모양과 비슷하게 스타일이 지정되었습니다. ::-webkit-scrollbar-track-piece 요소의 margin-top 및 margin-bottom 속성을 조정하여 스크롤바 썸의 시작 및 끝 지점을 수정할 수 있습니다.

이 코드는 스크롤바가 나타나 맞춤형 시각적 경험을 제공합니다.

위 내용은 웹 개발에서 높이가 감소된 사용자 정의 스크롤바를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!