css 특정 div에 scroll bar 생성하기 (flex 이용)

...상당히 애를 먹었다

<div className={bot}> 대충 이런식이라면

.bot::-webkit-scrollbar {
  width: 10px;
}
.bot::-webkit-scrollbar-thumb {
  background-color: #11141a;
  border-radius: 10px;
  background-clip: padding-box;
  border: 2px solid transparent;
}
.bot::-webkit-scrollbar-track {
  background-color: rgb(56, 56, 56);
  border-radius: 10px;
  box-shadow: inset 0px 0px 5px rgb(46, 46, 46);
}

이렇게만 하면 될거같은데 안된다..........

 

결국 열심히 구글링해서 결국 찾았는데

2가지가 추가적으로 필요하다.

1. bot에

  overflow-x: hidden;
  overflow-y: auto;

추가하기

2. 해당 div의 부모단 div에

  overflow: hidden;

을 넣어줘야 한다.

 

hidden 을 이용해서 특정 사이즈를 넘어가면 짜르게 해서 일단 높이를 고정시켜주고

overflow-y로 작은 부분에 스크롤 바를 넣어주는 원리 같다.

구글링한 글과 댓글에서도 이게 왜 작동하는지는 모른다고 한다 ㅋㅋㅋ 대략 저런 이유 같다.

그리고 스크롤 바가 커스톰이 적용이 안돼서..

앞에 .bot을 빼줬다. ::-webkit- 솰라솰라 이렇게 두니 전체 스크롤에 커스톰이 적용되는 모습.