스크롤 기능이 활성화되는 동안 스크롤 막대 보기 숨기기 - CSS

반응형

웹 개발에서는 웹 사이트나 웹 앱에서 스크롤 기능이 여전히 활성화되어 있는 동안 스크롤 막대 보기를 숨기는 등 피니시를 추가하는 것이 중요한 경우가 있다.

이 글은 CSS, SCSS 또는 SASS에서 그것을 어떻게 해야 하는지에 대한 빠르지만 효과적인 팁이다.

스크롤 막대를 숨겨야 하는 구성 요소는 반드시 페이지의 전체 본문이 아니라 본문의 내용 오버플로우 요소라고 가정합시다. 구성 요소에 오버플로 콘텐츠의 className이 있다고 가정합시다.

그럼 css에 있는 클래스네임으로 스타일링 마술을 해야겠네요.

.overflowed-content {
     overflow-y:scroll
        scrollbar-width: none;
}

.overflowed-content::-webkit-scrollbar{
     display: none;
}