본문 바로가기
html & css3

[html/css] 간단하게 scrollbar 스크롤바 두개 동시에 움직이기

kimnaa 2020. 11. 12. 18:52
반응형

 

 

http://nh0404.tistory.com/12

 

1. html 작성하기

앞의 링크에서 html table을 만들 때 헤더를 고정한 후 스크롤바 tr,td 부분에서부터 생기게 하는 방법을 설명하였습니다.

이어서 앞의 포스팅에서 만들었던 테이블을 똑같이 2개 만들어줍니다.

<!DOCTYPE html>
<head>
	<meta charset="UTF-8">
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" type="text/css" href="../assets/css/main_styleTT.css">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="Content-Script-Type" content="text/javascript" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<script type="text/javascript" src="/resources/js/jquery-2.2.4.min.js"></script>
</head>
<body>

<div class="content">
			<div class="center">
				
                <div class="whole1">
                    <div class="topbox1">
                        <table class="toptable1 colr_table2">
                        <tr class="fix_head">
							<th class="w40">이름</th>
							<th class="w20">미술</th>
							<th class="w20">음약</th>
							<th class="w20">체육</th>
						</tr>
                        </table>
                        <div class="middlebox">
                            <div class="box2 scrollnone">
                                <table class="colr_table2">
                                     <colgroup>
                                         <col width="40%">
                                         <col width="20%">
                                         <col width="20%">
                                         <col width="20%">
                                    </colgroup>
                                        <tr>
							<th>김00</th>
							<th>0</th>
							<th>0</th>
							<th>0</th>
						</tr>
						
						<tr>
							<th>이00</th>
							<th>0</th>
							<th>0</th>
							<th>0</th>
						</tr>
						
						<tr>
							<th>박00</th>
							<th>0</th>
							<th>0</th>
							<th>0</th>
						</tr>
						
						<tr>
							<th>한00</th>
							<th>0</th>
							<th>0</th>
							<th>0</th>
						</tr>
						
						<tr>
							<th>홍00</th>
							<th>0</th>
							<th>0</th>
							<th>0</th>
						</tr>
						
						<tr>
							<th>류00</th>
							<th>0</th>
							<th>0</th>
							<th>0</th>
						</tr>
						
						<tr>
							<th>윤00</th>
							<th>0</th>
							<th>0</th>
							<th>0</th>
						</tr>
						
						<tr>
							<th>김00</th>
							<th>0</th>
							<th>0</th>
							<th>0</th>
						</tr>
                        <tr>
							<th>황00</th>
							<th>0</th>
							<th>0</th>
							<th></th>
						</tr>
                        <tr>
							<th>윤00</th>
							<th>0</th>
							<th>0</th>
							<th>0</th>
						</tr>
                        <tr>
							<th>이00</th>
							<th>0</th>
							<th>0</th>
							<th>0</th>
						</tr>
                        <tr>
							<th>어00</th>
							<th>0</th>
							<th>0</th>
							<th></th>
						</tr>
                        <tr>
							<th>왕00</th>
							<th>0</th>
							<th>0</th>
							<th>0</th>
						</tr>
                        <tr>
							<th>심00</th>
							<th>0</th>
							<th>0</th>
							<th>0</th>
						</tr>
                        <tr>
							<th>유00</th>
							<th>0</th>
							<th>0</th>
							<th>0</th>
						</tr>
                        <tr>
							<th>곽00</th>
							<th>0</th>
							<th>0</th>
							<th>0</th>
						</tr>
                        <tr>
							<th>백00</th>
							<th>0</th>
							<th>0</th>
							<th>0</th>
						</tr>
                        <tr>
							<th>임00</th>
							<th>0</th>
							<th>0</th>
							<th>0</th>
						</tr>
                                </table>
                            </div>
                        </div>
                        </div>
                    <div class="topbox2">
                        <table class="toptable1 colr_table2">
                        <tr class="fix_head">
							<th class="w30">이름</th>
							<th class="w20">국어</th>
							<th class="w20">수학</th>
							<th class="w15">영어</th>
							<th class="w15">평균</th>
						</tr>
                        </table>
                        <div class="middlebox">
                            <div class="box2 scrollnone">
                                <table class="colr_table2">
                                     <colgroup>
                                         <col width="30%">
                                         <col width="20%">
                                         <col width="20%">
                                         <col width="15%">
                                        <col width="15%">
                                    </colgroup>
                         <tr>
							<th>김00</th>
							<th>0</th>
							<th>0</th>
							<th>0</th>
							<th>0</th>
						</tr>
						
						<tr>
							<th>이00</th>
							<th>0</th>
							<th>0</th>
							<th>0</th>
							<th>0</th>
						</tr>
						
						<tr>
							<th>박00</th>
							<th>0</th>
							<th>0</th>
							<th>0</th>
							<th>0</th>
						</tr>
						
						<tr>
							<th>한00</th>
							<th>0</th>
							<th>0</th>
							<th>0</th>
							<th>0</th>
						</tr>
						
						<tr>
							<th>홍00</th>
							<th>0</th>
							<th>0</th>
							<th>0</th>
							<th>0</th>
						</tr>
						
						<tr>
							<th>류00</th>
							<th>0</th>
							<th>0</th>
							<th>0</th>
							<th>0</th>
						</tr>
						
						<tr>
							<th>윤00</th>
							<th>0</th>
							<th>0</th>
							<th>0</th>
							<th>0</th>
						</tr>
						
						<tr>
							<th>김00</th>
							<th>0</th>
							<th>0</th>
							<th>0</th>
							<th>0</th>
						</tr>
                        <tr>
							<th>황00</th>
							<th>0</th>
							<th>0</th>
							<th></th>
							<th></th>
						</tr>
                        <tr>
							<th>윤00</th>
							<th>0</th>
							<th>0</th>
							<th>0</th>
							<th>0</th>
						</tr>
                        <tr>
							<th>이00</th>
							<th>0</th>
							<th>0</th>
							<th>0</th>
							<th>0</th>
						</tr>
                        <tr>
							<th>어00</th>
							<th>0</th>
							<th>0</th>
							<th>0</th>
							<th>0</th>
			
						</tr>
                        <tr>
							<th>왕00</th>
							<th>0</th>
							<th>0</th>
							<th>0</th>
							<th>0</th>
						</tr>
                        <tr>
							<th>심00</th>
							<th>0</th>
							<th>0</th>
							<th>0</th>
							<th>0</th>
						</tr>
                        <tr>
							<th>유00</th>
							<th>0</th>
							<th>0</th>
							<th>0</th>
							<th>0</th>
						</tr>
                        <tr>
							<th>곽00</th>
							<th>0</th>
							<th>0</th>
							<th>0</th>
							<th>0</th>
						</tr>
                        <tr>
							<th>백00</th>
							<th>0</th>
							<th>0</th>
							<th>0</th>
							<th>0</th>
						</tr>
                        <tr>
							<th>임00</th>
							<th>0</th>
							<th>0</th>
							<th>0</th>
							<th>0</th>
						</tr>
                                </table>
                            </div>
                        </div>
                        </div>
                    </div>	
    </div>
</div>
		

</body>
</html>

 

2. css 스타일 적용하기

 

*{margin:0;padding:0;}
html{height:100%;}

.wrap{
    position:relative;
}

.whole1{
    width: 97%;
    position: relative;
    height: 660px;
    margin: 0 auto;
    margin-top: 10px;
    float:left;
    margin-left: 40px;
}
.topbox1{
    position:absolute;
    top:0;
    left:0;
    height: 54px;
    background: #edf1f5;
    width: 46%;
    border-top: 0px;
}
.topbox2{
    position:absolute;
    top:0;
    left:50%;
    height: 54px;
    background: #edf1f5;
    width: 46%;
    border-top: 0px;
}

.middlebox{
    position: absolute;
    top:54px;
    left:0;
    width: 100%;
    height: 500px;
}
.box2{
    top:0;
    left:0;
    height: 580px;
    overflow-y: scroll;
    margin:0 auto;
    width: 100%;
    float:left;
    border-collapse: collapse;
    border-bottom: 1px solid rgba(179,179,179,0.4);
}
.toptable1{
    position: absolute;
    top:0;
    left:1px;
    width: 100%;
    border-collapse: collapse;
    z-index: 999;
    border-top: 0px;
}
.toptable1 th{
    top:0;
    left:0;
    border-collapse: collapse;
    background: #edf1f5;;
    height: 52px;
    border-top: 0px;
}
.colr_table2{
    border-collapse: collapse;
    width: 100%;
    float:left;
}
.colr_table2 th {
    border: 1px solid #cacaca;
    text-align: center;
    line-height: 44px;
    font-size: 14px;
}
.fix_head{
    position: absolute;
    display: inline-table;
    width: calc(100% - 18px);
    height: 54px;
    left: -1px;
    border-top: 0px;
}
.w15{
    width: 15%;
}
.w20{
    width: 20%;
}
.w30{
    width:30%;
}
.w40{
    width: 40%;
}
.w50{
    width: 50%;
}
​

 

3. 자바스크립트 적용하기

<script>
var $divs = $('.box2, .box1');
var sync = function(e){
    var $other = $divs.not(this).off('scroll'), other = $other.get(0);
    var percentage = this.scrollTop / (this.scrollHeight - this.offsetHeight);
    other.scrollTop = percentage * (other.scrollHeight - other.offsetHeight);
    setTimeout( function(){ $other.on('scroll', sync ); },10);
}
$divs.on( 'scroll', sync);
</script>

 

헤더를 고정시킨 테이블 작성방법은 앞에 포스트에 설명하였습니다.

 

 

반응형
저작자표시

'html & css3' 카테고리의 다른 글

[html/css] 가변글꼴 em 과 rem의 차이 및 상위요소  (0) 2020.11.14
[html/css] 반응형 웹디자인 기초 정리(1)  (0) 2020.11.13
[html/css] table th 테이블 헤더 고정하고 스크롤바 자연스럽게 만들기  (0) 2020.11.11
[html] 폼태그 그룹 정리 / select-option 과 datalist - option 차이, optgroup과 option  (0) 2020.11.10
Formtag 폼 태그 필수속성, Input type 정리(2)  (0) 2020.11.09

'html & css3' Related Articles

티스토리툴바