티스토리 뷰
매번 검색하는 스크롤바 숨기기.. 이참에 정리해보자!
가로 스크롤이나 세로 스크롤 영역이 생기면 자동으로 스크롤바가 생기게 된다. 스크롤바를 없애려면 스크롤바가 생기는 부분에 브라우저 별로 스크롤바를 없애주는 css를 추가해주면 된다.
아래와 같이 코드를 사용하면 IE, Edge, Firefox, Chrome, Safari, Opera 등의 브라우저에서 스크롤바를 없애도록 대응할 수 있다.
.no-scroll {
-ms-overflow-style: none; /* IE, Edge */
scrollbar-width: none; /* Firefox */
}
.no-scroll::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera */
}
참고
'Client > CSS' 카테고리의 다른 글
[CSS] width: 100%와 width: auto의 차이를 붕어빵으로 알아보자! (feat. Tailwind CSS) (0) | 2024.11.29 |
---|---|
[Tailwind CSS] 전역 폰트 적용 (@import must precede all other statements (besides @charset or empty @layer)) (0) | 2024.09.04 |
[CSS] initial 속성과 inherit 속성 (0) | 2024.04.02 |
[CSS] a 태그 사이 공백 제거하는 법 (0) | 2024.03.20 |
[CSS] flex 속성 정리 (flex-basis, flex-grow, flex-shrink) (0) | 2024.03.12 |
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- 리액트
- 동기
- javascript
- 배열
- hydrationboundary
- Target
- innerhtml
- html
- 중급 프로젝트
- CSS
- arguments
- react
- js
- map
- GitHub
- tanstackquery
- 비제어 컴포넌트
- 제어 컴포넌트
- Next.js
- 코드잇스프린트
- 객체
- currentTarget
- rest parameter
- Git
- 프론트엔드
- 비동기
- 코드잇 스프린트
- 스프린트프론트엔드6기
- 유사배열객체
- 취업까지달린다
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
글 보관함