특정 영역만 가로 스크롤 생성 (+스크롤 기능은 하되 스크롤 없애기)

2022. 5. 9. 16:53CSS

<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