[DOM_Style] JS - overflowY 속성 ★ - 범위이탈요소처리 (= 범위넘는요소처리 = 스크롤바 생성 = overflowY속성 = 오버플로속성, 상속X)

overflowY 예제 

 

<style> 

#hz {

  border: 1px solid black;

  background-color: yellow;

  width: 200px;

  height: 100px;

}

</style>

<button onclick="homzzang()">클릭</button>

<div id="hz">

홈짱닷컴 Homzzang.com 홈페이지 제작 유지보수 관리 서버관리 코딩언어

HTML CSS JAVASCRIPT JQUERY BOOTSTRAP PHP SQL 그누보드 영카트 배추빌더 아미나 나리야

</div>

<script>

function homzzang() {

  document.getElementById("hz").style.overflowY = "scroll";

}

</script>

 

결과보기 

overflowY 정의 

 

내용이 요소의 세로 영역에 넘칠 경우, 내용을 세로축으로 어떻게 처리할지 지정. 

 

---

 

1.

overflowX

내용이 요소의 가로 영역에 넘칠 경우, 내용을 가로축으로 어떻게 처리할지 지정. 

 

2.

기본값: visible

CSS버전: CSS3

모든 브라우저 지원.

 

overflowY 구문 

 

[반환]

object.style.overflowY

 

[설정]

object.style.overflowY = "visible|hidden|scroll|auto|initial|inherit"

 

---

 

[속성값]

 

visible

요소 범위 넘는 부분을 그대로 노출. (기본값)

 

hidden

요소 범위 넘는 부분 자르고, 스크롤도 생성 안 함.

 

scroll

무조건 스크롤 생성.

 

auto

넘치면 스크롤 생성하고, 안 넘치면 스크롤 생성 안 함.

 

initial

이 속성의 기본값으로 설정.

 

inherit

부모 요소의 속성값 상속.