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
부모 요소의 속성값 상속.
