웹페이지 혹은 프레임 생성시 scrolling 을 제어 > 기술자료

• 목록

(좌우,상하) scroll bar (스크롤바)를 제어하고자 하는 페이지 head 부분에 아래 코드를 추가합니다.

[ 사용법 ]
stylesheet의 html 또는 body에 아래 내용중 원하는 기능을 삽입합니다.
  overflow-x: hidden;   /* 가로 스크롤바 항상 숨김 */
  overflow-y: hidden;   /* 세로 스크롤바 항상 숨김 */
  overflow: hidden;      /* 가로, 세로 스크롤바를 항상 숨김 */
  overflow-x: scroll;      /* 가로 스크롤바 항상 보이기 */
  overflow-y: scroll;     /* 세로 스크롤바 항상 보이기 */

  overflow: auto;    // 가로, 세로 스크롤바를 자동생성


[ 방법1 / 올바른 사용 ] html class 사용할경우
html 과 body 가 둘다 사용된 경우 body 에 overflow 속성을 사용하면 스크롤이 2번 생기게 됩니다.
한번은 html 에서 , 다른거는 body 에서
<style type="text/css">
<!--
html {
}
body {
}
//-->
</style>


[ 방법2 / 잘못된 사용 ] html 와 body 모두 사용하고 body에 overflow 를 사용할경우
html 과 body 가 둘다 사용된 경우 body 에 overflow 속성을 사용하면 스크롤이 2번 생기게 됩니다.
<style type="text/css">
<!--
html {
}
body {
  overflow-x: hidden;
  overflow-y: hidden;
  overflow: hidden;
  overflow-x: scroll;
  overflow-y: scroll;
  overflow: auto;
}
//-->
</style>


[ 방법3 / 올바른 사용 ] html class 사용안할 경우
<style type="text/css">
<!--
body {
  overflow-x: hidden;
  overflow-y: hidden;
  overflow: hidden;
  overflow-x: scroll;
  overflow-y: scroll;
  overflow: auto;
}
//-->
</style>


참고자료
http://kyunghwa.tistory.com/entry/웹페이지-스크롤바-제어
http://eon-yang.com/koard.php?db=ent_html&op=view&l=3