관리 메뉴

어느 프로그래머의 스마트한 이야기

[자바스크립트] javascript로 화면에 크기에 맞게 가로 세로 스크롤 생기게 하는 Html/자바스크립트 소스 본문

프로그래밍 언어/자바스크립트

[자바스크립트] javascript로 화면에 크기에 맞게 가로 세로 스크롤 생기게 하는 Html/자바스크립트 소스

꿈꾸는 우림 2015.04.03 14:08

화면에 크기에 맞게 가로 세로 스크롤 생기게 하는 Html/자바스크립트 소스

 

 소스 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>화면에 크기에 맞게 가로 세로 스크롤 생기게 하는 Html/자바스크립트 소스</title>
<script>

	function scrollX() {
	    document.all.mainTable.scrollLeft = document.all.bottomLine.scrollLeft;
	    document.all.topTable.scrollLeft = document.all.bottomLine.scrollLeft;
	}

	function scrollY() {
	    document.all.leftTable.scrollTop = document.all.mainTable.scrollTop;
	    document.all.mainTable.scrollTop = document.all.leftTable.scrollTop;
	}

</script>
</head>
<body>
 
	
1번테이블 1번테이블
2번테이블 2번테이블 2번테이블 2번테이블 2번테이블 2번테이블 2번테이블 2번테이블 2번테이블 2번테이블
3번테이블 3번테이블
3번테이블 3번테이블
3번테이블 3번테이블
3번테이블 3번테이블
3번테이블 3번테이블
3번테이블 3번테이블
3번테이블 3번테이블
3번테이블 3번테이블
3번테이블 3번테이블
3번테이블 3번테이블
3번테이블 3번테이블
3번테이블 3번테이블
4번테이블 4번테이블 4번테이블 4번테이블 4번테이블 4번테이블 4번테이블 4번테이블 4번테이블 4번테이블
4번테이블 4번테이블 4번테이블 4번테이블 4번테이블 4번테이블 4번테이블 4번테이블 4번테이블 4번테이블
4번테이블 4번테이블 4번테이블 4번테이블 4번테이블 4번테이블 4번테이블 4번테이블 4번테이블 4번테이블
4번테이블 4번테이블 4번테이블 4번테이블 4번테이블 4번테이블 4번테이블 4번테이블 4번테이블 4번테이블
4번테이블 4번테이블 4번테이블 4번테이블 4번테이블 4번테이블 4번테이블 4번테이블 4번테이블 4번테이블
4번테이블 4번테이블 4번테이블 4번테이블 4번테이블 4번테이블 4번테이블 4번테이블 4번테이블 4번테이블
4번테이블 4번테이블 4번테이블 4번테이블 4번테이블 4번테이블 4번테이블 4번테이블 4번테이블 4번테이블
4번테이블 4번테이블 4번테이블 4번테이블 4번테이블 4번테이블 4번테이블 4번테이블 4번테이블 4번테이블
4번테이블 4번테이블 4번테이블 4번테이블 4번테이블 4번테이블 4번테이블 4번테이블 4번테이블 4번테이블
4번테이블 4번테이블 4번테이블 4번테이블 4번테이블 4번테이블 4번테이블 4번테이블 4번테이블 4번테이블
4번테이블 4번테이블 4번테이블 4번테이블 4번테이블 4번테이블 4번테이블 4번테이블 4번테이블 4번테이블
4번테이블 4번테이블 4번테이블 4번테이블 4번테이블 4번테이블 4번테이블 4번테이블 4번테이블 4번테이블
 
</body> </html>

 

 설명 

아래와 같이 내용이 화면보다 너비나 높이가 길어지면 자동으로 가로, 세로 스크롤이 테이블에 생기는 소스입니다.


 function scrollX() {
         document.all.mainTable.scrollLeft = document.all.bottomLine.scrollLeft;
         document.all.topTable.scrollLeft = document.all.bottomLine.scrollLeft;
 }
 function scrollY() {
         document.all.leftTable.scrollTop = document.all.mainTable.scrollTop;
         document.all.mainTable.scrollTop = document.all.leftTable.scrollTop;
 }


위 자바스크립트 함수가 가로, 세로 스크롤을 제어해 줍니다.

아래 실행에서 [새창]으로 띄워서 확인해 보세요~


 실행 

[새창] [새창(소스포함)]



저작자 표시
신고
3 Comments
댓글쓰기 폼