스크롤바 꾸미기

스크롤바 꾸미기

참조 링크 : https://ansohxxn.github.io/blog/scrollbar/

서론

블로그를 꾸미기 위해 자료를 찾던 중 블로그 내 스크롤을 꾸밀 수 있는 좋은 자료를 찾아서 적용하기로 했다.

일반적으로 따라서 적용하기 보단, 어떻게 적용되는지 구조를 알아보고 더 나은 방법은 없는지 알아보고 적용하려고 했다.

참조 링크에서 제시해준 코드는 다음과 같다.

    <style> 
      ::-webkit-scrollbar{width: 16px;}
      ::-webkit-scrollbar-track {background-color:#4b4f52; border-radius: 16px;}
      ::-webkit-scrollbar-thumb {background-color:#5e6265; border-radius: 16px;}
      ::-webkit-scrollbar-thumb:hover {background: #ffd24c;}
      ::-webkit-scrollbar-button:start:decrement,::-webkit-scrollbar-button:end:increment 
      {
          width:12px;height:12px;background:transparent;}
      } 
    </style>

우선적으로 중괄호 오류가 있어 수정해주었다.

<style> 
    ::-webkit-scrollbar {
        width: 16px;
    }
    ::-webkit-scrollbar-track {
        background-color: #4b4f52;
        border-radius: 16px;
    }
    ::-webkit-scrollbar-thumb {
        background-color: #5e6265;
        border-radius: 16px;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: #ffd24c;
    }
    ::-webkit-scrollbar-button:start:decrement,
    ::-webkit-scrollbar-button:end:increment {
        width: 12px;
        height: 12px;
        background: transparent;
    }
</style>

참조 링크에서는 _layouts\default.html 파일의 head 부분에 그대로 붙어넣었지만 head 부분에서 custom.html 파일을 불러와 사용하고 있고, 커스텀한 내용을 적용할 수 있는 custom.html 파일에 붙여넣으면 유지보수하기 편하게 사용할 수 있다.

_includes\head\custom.html 위치에 수정된 코드를 붙여넣어 준다.

<!-- start custom head snippets -->

<!-- insert favicons. use https://realfavicongenerator.net/ -->

<!-- end custom head snippets -->


<style> 
    ::-webkit-scrollbar {
        width: 16px;
    }
    ::-webkit-scrollbar-track {
        background-color: #4b4f52;
        border-radius: 16px;
    }
    ::-webkit-scrollbar-thumb {
        background-color: #5e6265;
        border-radius: 16px;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: #ffd24c;
    }
    ::-webkit-scrollbar-button:start:decrement,
    ::-webkit-scrollbar-button:end:increment {
        width: 12px;
        height: 12px;
        background: transparent;
    }
</style>

이제 스크롤에 대한 스타일 코드를 자기 입맞에 맞게 변경해주면 된다.