[Javascript] Window 크기 및 스크롤 이벤트

스크롤 이벤트
window.onscroll 에 이벤트 처리 함수를 넣는다.
윈도우 크기 변화 이벤트
window.onresize 에 이벤트 처리 함수를 넣는다.




Javascript

<script type="text/javascript">
function get(obj) {
  if (typeof obj == "object") {
    return obj;
  }
  return document.getElementById(obj);
}
function setText(obj, text) {
  get(obj).innerHTML = text;
}
function appendText(obj, text) {
  get(obj).innerHTML += text;
}

window.onscroll = function() {
  setText("scroll-pos", "onscroll/top:" + document.body.scrollTop + ", left:" + document.body.scrollLeft);
};
window.onresize = function() {
  setText("window-size", "onresize/width:" + window.innerWidth + ", height:" + window.innerHeight);
};
</script>

CSS

<style type="text/css">
#status-box {z-index:50;position:fixed;background-color:white;bottom:10px;right:10px;border:2px solid black;padding:5px;}
</style>

HTML

<div id="status-box">
  <div id="scroll-pos"></div>
  <div id="window-size"></div>
</div>