특정 영역만 가로 스크롤 생성 (+스크롤 기능은 하되 스크롤 없애기)
2022. 5. 9. 16:53ㆍCSS
<section>
<img src="ex.png" alt="예시이미지" />
</section>
section {
overflow-x: auto;
}
예시는 모바일 사이에 넣은 이미지표이며 해당 영역만 좌우 스크롤이 되게 하였다
+)가로영역을 스크롤처럼 쓰되 스크롤바는 없애기
<div>
<p>카테고리1</p>
<p>카테고리2</p>
<p>카테고리3</p>
<p>카테고리4</p>
</div>
div {
white-space: nowrap;
overflow-x: auto;
-ms-overflow-style: none; /* IE, Edge */
scrollbar-width: none; /* Firefox */
}
div::-webkit-scrollbar {
display: none;
}
div p{
display: inline-block;
}
1) white-space:nowrap;을 주어 자식요소가 가로정렬이 되게 한다.
2) overflow-x: auto;을 주어 가로스크롤이 적용되도록 한다.
3) 부모요소::-webkit-scrollbar에 display:none; 을 준다.
4) 자식요소에 inline-block;을 주어 본인의 너비값만 가질 수 있게 한다(이 때 white-space:nowrap;가 적용됨)
4) 스크롤은 안보이지만 좌우로 스크롤되는 영역 완성!
'CSS' 카테고리의 다른 글
css+js)display:none 애니메이션 효과 (0) | 2022.05.16 |
---|---|
드래그&우클릭 방지 (0) | 2022.05.10 |
형광펜 효과 (0) | 2022.05.06 |
nth-child() : n번째부터 n번째 까지 (0) | 2022.04.15 |
input type:text 타이핑 시 이벤트 조작 (0) | 2022.04.15 |