css scroll 없애기, Scroll 비노출 with SCSS

 

가끔 가로 스크롤 ( Horizontal scroll ) 이나 작은 메뉴바를 만들 때 scroll bar 를 없애야 하는 경우가 있다 ( scroll bar가 노출되면 UI가 망가지는 경우 )

See the Pen jOyePWq by Sam kwon (@samuberple) on CodePen.

-ms-overflow-style: none;
.block::-webkit-scrollbar {
  width: 0px;
  height: 0px;
  color: none;
}

위 코드를 css 에 추가하면 스크롤이 노출되지 않게된다

See the Pen jOyePWq by Sam kwon (@samuberple) on CodePen.

SCSS 를 사용하면 mixin 으로 관련 스타일을 정의하여 재활용이 가능하다

@mixin scroll-bar-none {
    -ms-overflow-style: none;
    &::-webkit-scrollbar {
        width: 0px;
        height: 0px;
        color: none;
    }
}

See the Pen jOyePWq by Sam kwon (@samuberple) on CodePen.