본문 바로가기
Frontend/HTML5

HTML/CSS 스크롤바 숨기기 없애기 (스크롤 동작)

홍아지 2019. 10. 17. 11:28

스크롤은 동작하지만 스크롤바를 숨기고 싶은 경우가 있어요.

 

예제를 통해 알아볼게요. 우선, 스크롤을 생성하겠습니다.

 

<div class="box" style="width: 200px; height: 100px; background: #F78181; overflow-y: scroll;">
    안녕하세요.<br>
    스크롤바 숨기기.<br>
    스크롤은 동작.<br>
    Scrollbar hide.<br>
    Scroll active.<br>
    스크롤바 숨기기.<br>
    스크롤은 동작.<br>
    Scrollbar hide.<br>
    Scroll active.<br>
</div>

 

안녕하세요.
스크롤바 숨기기.
스크롤은 동작.
Scrollbar hide.
Scroll active.
스크롤바 숨기기.
스크롤은 동작.
Scrollbar hide.
Scroll active.

스크롤바 숨기기 (Hide scroll bar)

.box {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}
.box::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera*/
}

 

저작자표시

'Frontend > HTML5' 카테고리의 다른 글

HTML/CSS 비디오 테두리 제거  (1) 2020.12.12
HTML/CSS 가운데 정렬  (0) 2019.10.23
HTML/CSS div 가로 배열 3등분, 양옆으로 (flex 속성)  (0) 2019.09.26
HTML/CSS 이미지 둥글게 원 모양 (프로필)  (1) 2019.09.25
HTML/CSS 한 줄 텍스트 넘칠 때 숨기기... 생략  (0) 2019.09.25

태그

, , ,

'Frontend/HTML5' Related Articles