[HTML/CSS] 가로 세로 스크롤바 항상 보이게 설정하기

 

 

CSS로 스크롤바를 항상 보이게 표시하려면 'overflow' 속성을 사용합니다.

 

 

overflow, overflow-x, overflow-y

다음은 <div> 영역에 강제로 스크롤바를 생성한 예제입니다.

 

<div class='mydiv1'>전체 scroll</div>
<div class='mydiv2'>가로 scroll</div>
<div class='mydiv3'>세로 scroll</div>

.mydiv1 {
  overflow: scroll;  
}

.mydiv2 {
  overflow-x: scroll;
}

.mydiv3 {
  overflow-y: scroll;
}

div {
  width: 200px;
  height: 100px;
  background-color: skyblue;
  margin: 10px;
  border: 1px solid black;
  text-align: center;
}

overflow: scroll;

요소의 크기에 상관없이, 가로 세로 방향 스크롤을 생성합니다.

 

overflow-x: scroll;

가로 방향 스크롤을 생성합니다.

 

overflow-y: scroll;

세로 방향 스크롤을 생성합니다.