오버플로우 y 스크롤바 스타일을 변경하는 방법

오버플로우 y 스크롤바 스타일을 변경하는 방법

아래와 같은 스타일로 오버플로-Y 스크롤을 적용했습니다.

.custom #front_videos .large-2 {
    height: 545px;
    overflow-y: scroll;
    position: relative;
}

이 화면 스크롤은 다음과 같습니다.-> http://nimb.ws/XZ3RVS

스크롤 바를 다음과 같이 표시합니다.-> http://nimb.ws/IGMnXl

CSS 스타일로 스크롤 바를 표시하는 방법을 알고 계신 분들은 저를 재생해 주세요.

감사해요.

::-webkit-scrollbar와 형제 셀렉터를 사용하여 비슷한 스타일을 만들었습니다.스크롤바는 W3C 사양의 일부가 아니기 때문에 Chrome의 비교적 견고한 의사 셀렉터 이외에는 유효한 셀렉터가 없기 때문에 이것은 Chromium 브라우저 전용입니다.

.large-2 {
  margin-left: 30px;
  float: left;
  height: 300px;
  overflow-y: scroll;
  margin-bottom: 25px;
  width: 100px;
  background: #ccc;
}

.force-overflow {
  min-height: 450px;
}

.large-2::-webkit-scrollbar-track {
  border: 1px solid #000;
  padding: 2px 0;
  background-color: #404040;
}

.large-2::-webkit-scrollbar {
  width: 10px;
}

.large-2::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: #737272;
  border: 1px solid #000;
}

<div class="custom">
  <div id="front_videos">
    <div class="large-2">
      <div class="force-overflow"></div>
    </div>
  </div>
</div>

NanoScroller라고 불리는 비교적 우아한 JavaScript 솔루션이 있습니다. 하지만 저는 개인적으로 if에 대한 경험이 많지 않습니다. 만약 당신이 크로스 브라우저 기능을 더 많이 가지고 있다면 말이죠.

이것을 시험해 보세요.

::-webkit-scrollbar {
    width: 12px;
}

/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(255,0,0,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(255,0,0,0.4); 
}

이 토막을 사용해 보세요.

::-webkit-scrollbar {
width: 20px;
}

::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey; 
border-radius: 10px;
}

::-webkit-scrollbar-thumb {
background:black; 
border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
background:rgb(54, 56, 58); 

}

::-webkit-scrollbar 접두사를 사용하여 스크롤바를 스타일링할 수 있지만 웹킷에서만 작동합니다.

사용하는 게 좋을 것 같아요."jquery.mCustomScrollbar.concat.min"이 jquery 플러그인.대부분의 브라우저를 지원합니다.

언급URL : https://stackoverflow.com/questions/48960404/how-to-change-overflow-y-scrollbar-styles