[CSS] scroll bar design _ 스크롤바 디자인

[html]

<div>

  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem excepturi laborum quidem ullam quae, magni temporibus magnam quasi adipisci laudantium natus voluptatum facere cum. Distinctio corporis porro eos odit sed?</p>

</div>

 

[css]

div{

  width: 200px; height: 200px;

  outline: 1px solid red;

  overflow-y: scroll;

}

div::-webkit-scrollbar{ /* 스크롤바 배경 */

  width: 20px;

  border-radius: 10px;

  background: blue;

}

div::-webkit-scrollbar-thumb{ /* 스크롤바 */

  border-radius: 10px;

  background: pink;

}

 

See the Pen [CSS] scrollbar design _ 스크롤바 디자인 by Jinsik Son (@Jinsik-Son) on CodePen.