hover하면 스크롤 보이는 css

 

html

<div class="scrollWrap">
  <div class="scroll">
      <div class="box">
        box1
      </div>
      <div class="box">
        box2
      </div>
      <div class="box">
        box3
      </div>
      <div class="box">
        box4
      </div>
      <div class="box">
        box5
      </div>
        <div class="box">
        box6
      </div>
      <div class="box">
        box7
    </div>
 </div>
</div>

css

.scrollWrap {
  width: 100px;
  border: 1px solid;
}
.scroll {
  height : 200px; 
  overflow : hidden;
  /*부모요소보다 작은 높이값 때문에 영역 밖으로 나가는 내용들 hidden*/
}
.scroll:hover {
  overflow: overlay;
}
/*스크롤바 영역 설정*/
.scroll::-webkit-scrollbar {
  width: 8px;
}
/*스크롤바 막대 설정*/
.scroll::-webkit-scrollbar-thumb {
  background-color: #217af4;
  border-radius: 5px;
}
/*스크롤바 뒷 배경 설정*/
.scroll::-webkit-scrollbar-track {
    background: rgba(33, 122, 244, .1);  
}
.box {
  padding: 20px;
}
.box:not(:last-child) {
  border-bottom: 1px solid;
}

 

See the Pen scroll by vihiolet (@vihiolet) on CodePen.

 

웹페이지에서 사용할 때는 .scroll에 들어가는 높이값이나 overflow: hidden은 없어도 되겠지.
상황에 따라 부모요소인 .scrollWrap에 overflow: hidden를 줘야 할 수도 있다.
상황에 따라 hover에 z-index를 줘야 될 수도 있다.
회사에서 작업할 때는 그렇게 했 

 

#flex_wrap1 {
    flex-grow: 1;
    display: flex;
flex-direction: column;
    overflow: hidden;
}

#content_wrap:hover {
overflow: overlay;
z-index: 1;
}

#content_wrap::-webkit-scrollbar {
width: 10px;
height: 10px;
}

#content_wrap::-webkit-scrollbar-thumb {
    border-radius: 5px;
background-color: hsla(0, 0%, 42%, 0.49);
}

 

::-webkit-scrollbar -> 스크롤바 영역 설정
::-webkit-scrollbar-thumb -> 스크롤바 막대 설정
::-webkit-scrollbar-track -> 스크롤바 뒷 배경 설정

 

 

 

 

 

 

도움 받은 블로그

https://gurtn.tistory.com/120

[CSS] 스크롤바 스타일 커스텀하기

감사합니다.