Scrollbar를 숨기는 확실한 방법

qpress 2020년 2월 6일 34

Scrollbar를 없애는 가장 일반적인 방법은 아래와 같이 overflow 속성을 활용하는 방식이다.

body{
    overflow:hidden;
}

그런데, 이렇게 하더라도 내부의 iframe과 같은 요소가 다이나믹하게 길어져서 아래로(스크롤 밖으로) 밀어 낼때 간혹 Scrollbar가 생기는 경우가 있다.
이런 경우를 막고 어떤 경우든 스크롤이 생기지 않게 하려면 아래와 같이 별도의 class를 만들어 주는 것이 좋다.

.example {
    overflow : hidden;
    /* Hide scrollbar for IE and Edge */
    -ms-overflow-style: none;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
    display: none;
}

/* How to use
<body class="example">
*/