CSS 가로스크롤 적용하기 :: horizontal scroll

 

가로 스크롤을 적용할 요소에 스크롤 가능한 너비를 설정합니다. 이를 위해 해당 요소에 overflow-x: scroll;을 적용합니다.

.element {
  overflow-x: scroll;
}

필요한 경우 스크롤 막대를 보이도록 설정할 수 있습니다. 이를 위해 해당 요소에 overflow-y: hidden;을 추가합니다.

.element {
  overflow-x: scroll;
  overflow-y: hidden;
}

스크롤 가능한 요소 내부의 내용이 가로로 오버플로우될 수 있도록 콘텐츠의 너비를 설정합니다. 이를 위해 내부 요소의 너비를 콘텐츠의 총 너비보다 크게 설정합니다.

.content {
  width: 1000px; /* 콘텐츠의 총 너비 */
}

스크롤 막대에 스타일을 적용하여 디자인을 개선할 수 있습니다.

::-webkit-scrollbar {
  width: 10px; /* 스크롤 막대의 너비 */
}

::-webkit-scrollbar-thumb {
  background-color: #888; /* 스크롤 막대 색상 */
}

::-webkit-scrollbar-thumb:hover {
  background-color: #555; /* 스크롤 막대 호버 시 색상 */
}

 

 

내가 개발할때 필요했던 부분은

기본 PC 화면에서 바로 가로스크롤이 해당부분에 적용되게 하는 거였다.

(화면이 줄어들거나 모바일 화면일때 적용이 아닌 기본으로 가로스크롤 적용)

.content{
	display: flex;
	padding: 0 0 0 20px;
	overflow-y: hidden;
	overflow-x: auto;
	width: auto;
	white-space: nowrap;
	min-width: 150%;
}

로 해결하였다.