퍼블리싱

[CSS 활용] 투명한 스크롤바 - 내용위에 오버레이 되는 스크롤바

lionbum 2022. 1. 17. 21:33

 
스크롤바 
평소엔 안보이다가, 길이가 길어진 경우 
스크롤이 생기는데, 그게 너비값을 갖지 않도록
스크롤 생기는 박스 위에 투명하게 오버레이 되어 보이게 하기. 
 
그래야, 너비값을 갖지 않고, 전체 레이아웃을 틀어지지 않게 한다. 
 
** 단 이런 경우, 스크롤이 들어가는 위치에 뭔가 클릭을 해야하거나 하는 요소가 없어야 함. 

 

HTML

<div class="scrollbar">
  <ul>
    <li>01</li>
    <li>02</li>
    <li>03</li>
    <li>04</li>
    <li>05</li>
    <li>06</li>
    <li>07</li>
    <li>08</li>
    <li>09</li>
    <li>10</li>
  </ul>
</div>

 
 

CSS

div,ul,li{
  padding: 0;
  margin: 0;
  box-sizing:border-box;
}

.scrollbar{
  width:200px;
  height: 200px;
  overflow:overlay;
  border:1px solid #ddd;
}
.scrollbar::-webkit-scrollbar {
    width: 1vw;
}
.scrollbar::-webkit-scrollbar-thumb {
    background-color: hsla(0, 0%, 42%, 0.29);
    border-radius: 100px;
}
.scrollbar ul li {
  line-height: 50px;
  border-bottom: 1px solid #fff;
  text-align: center;
  font-size: 22px;
  background-color:#dedede
 }

 

결과 

 
 
 
다른 샘플- 박스안에 텍스트를 넣은 경우 
 
 

728x90
반응형