マウスホイールでテーブルを左右及び上下スクロールさせる_技術三昧ブログ

ホーム » ブログ » マウスホイールでテーブルを左右及び上下スクロールさせる

@2016/09/21

本記事は「マウスホイールでテーブルを左右及び上下スクロールさせる」方法を掲載します。
動き：①左右上下スクロールバー移動したら、ヘッダー又はタイトルが固定し、横・縦部分は連動でスクロールする。
　　　②左メニュー・タイトル範囲内に、マウスホイール上下スクロールしたら、ヘッダー固定し、テーブルを上下スクロールする。
　　　③詳細データ範囲内に、マウス上下スクロールしたら、左タイトル固定し、テーブル左右スクロールする。

【DEMO】マウスホイールでテーブルを左右及び上下スクロールさせる
【ソース】


<html>
<head>
<meta charset="utf-8">
<title>マウスホイールでテーブル左右&上下スクロールサンプル</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<style type="text/css">
/* 外枠 */
#x_data_area {
	position:relative;
	width:386px;
	height:167px;
    background-color:#CCCCCC;
}

/* 基本のテーブル定義 */
table.csTbl {
	border:1px solid #000000;
	border-collapse:collapse;
	table-layout:fixed;
}
table.csTbl tr {height:24px;}
table.csTbl td,table.csTbl th{border:1px solid #000000;}
table.csTbl tr:nth-child(odd)  td{background-color:#C8C8E8;color:#000000;}
table.csTbl tr:nth-child(even) td{background-color:#E8E8FF;color:#000000;}
table.csTbl th{background-color:lightBlue;color:#000000;}

/* 固定タイトル */
#fixTbl {width: 80px;}
/* （水平）枠 */
#hTtlWrap {
   position: absolute;left:80px;top:0px;
   width:280px;
   overflow-x:hidden;overflow-y:hidden;
}
/* （水平）固定タイトル */
table.HFix {width:360px;}
table.HFix th, table.HFix td {width:90px}
table.HFix th:last-child, table.HFix th:last-child {width:110px}

/* （垂直）枠 */
#vTtlWrap {
   position: absolute;
   left:0px;
   top:24px;
   width:80px;
   height:130px; 
   overflow-x:hidden;overflow-y:hidden;
   box-sizing: border-box;
}
/* （垂直）固定タイトル */
table.VFix {width: 80px;}


#data {
   position: absolute;left:80px;top:24px;
   overflow-x:scroll;overflow-y:scroll;
   width:296px;height:145px;
   }
</style>
</head>
<body>

<div id="x_data_area">
<!-- 固定ヘッダ -->
<!--<table class="csTbl"  style="width:90px;position:absolute;left:0px;top:0px;">-->
	<table class="csTbl" id="fixTbl">
	<tr>
		<th>社員番号</th>
	</tr>
	</table>
 <!-- 水平タイトル -->
<div id="hTtlWrap">
	<table class="csTbl HFix">
	<tr>
		<th>名前</th>
		<th>性別</th>
		<th>年齢</th>
		<th>職位</th>
	</tr>
	</table>
</div>
 <!-- 垂直タイトル-->
<div id="vTtlWrap">                         
	<table class="csTbl VFix" id="vFixTbl">
		<tr><th>1</th></tr>
		<tr><th>2</th></tr>
		<tr><th>3</th></tr>
		<tr><th>4</th></tr>
		<tr><th>5</th></tr>
		<tr><th>6</th></tr>
		<tr><th>7</th></tr>
		<tr><th>8</th></tr>
		<tr><th>9</th></tr>
		<tr><th>10</th></tr>
		<tr><th>11</th></tr>
		<tr><th>12</th></tr>
	</table>
</div>

 <!-- スクロールデータ -->
<div id="data">
	<table class="csTbl HFix" id="h_fix_data_tbl">
		<tr><td><a href="http://www.matao.me">N1</a></td><td>男</td> <td>33</td> <td>PM</td></tr>
		<tr><td>N2</td><td>男</td><td>12</td><td>PG</td></tr>
		<tr><td><a href="http://www.zanmai.net">N3</a></td><td>男</td><td>13</td><td>PM</td></tr>
		<tr><td>N4</td><td>男</td><td>14</td><td>SE</td></tr>
		<tr><td>N5</td><td>女</td><td>15</td><td>SE</td></tr>
		<tr><td><a href="http://www.hymama.com">N6</a></td><td>女</td><td>33</td><td>PM</td></tr>
		<tr><td>N</td><td>女</td><td>33</td><td>PM</td></tr>
		<tr><td>N8</td><td>男</td><td>12</td><td>PG</td></tr>
		<tr><td>N9</td><td>男</td><td>13</td><td>PM</td></tr>
		<tr><td>N</td><td>男</td><td>14</td><td>SE</td></tr>
		<tr><td>N11</td><td>女</td><td>15</td><td>SE</td></tr>
		<tr><td>N12</td><td>女</td><td>15</td><td>SE</td></tr>
	</table>
</div>

</div>
<script type="text/javascript">
$(function() {
	//----------------------------------------------------------
	//- スクロールバーの連動処理
	//----------------------------------------------------------
	$("#data").scroll(function() {
		$("#hTtlWrap").scrollLeft(this.scrollLeft);// 左右連動させる
  		$("#vTtlWrap").scrollTop(this.scrollTop);// 上下連動させる
	});

	var mevt = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
	//----------------------------------------------------------
	//- （横）マウスホイール処理（左右移動させる）
	//----------------------------------------------------------
    $("#data").on(mevt,function(e){
    	e.preventDefault();
       	// 左右移動単位
		var stepLen = 28;
		// マウスホイールの上下スクロール判断し、左右移動させる
		var delta = e.originalEvent.deltaY ? -(e.originalEvent.deltaY) : e.originalEvent.wheelDelta ? e.originalEvent.wheelDelta : -(e.originalEvent.detail);
		if (delta > 0) {
			this.scrollLeft -= (stepLen);
		} else {
			this.scrollLeft += (stepLen);
		}
    });
    
    var mevt = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
	//----------------------------------------------------------
	//- （縦）マウスホイール処理（上下移動させる）
	//----------------------------------------------------------
    $("#vTtlWrap").on(mevt,function(e){
    	e.preventDefault();
       	// 上下移動単位
		var stepH = 24;
		// マウスホイールの上下スクロール判断し、上下移動させる
		var delta = e.originalEvent.deltaY ? -(e.originalEvent.deltaY) : e.originalEvent.wheelDelta ? e.originalEvent.wheelDelta : -(e.originalEvent.detail);
		if (delta > 0) {
			this.scrollTop -= (stepH);
			$("#data").scrollTop(this.scrollTop);// 上下連動させる
		} else {
			this.scrollTop += (stepH);
			$("#data").scrollTop(this.scrollTop);// 上下連動させる
			
		}
    });
    

	
});


</script>
</body>
</html>

当サイトの前の記事「htmlテーブルを縦横スクロールできる超簡単なサンプル」は、上記①の機能のみ実現できる方法も記載しています。

♪ 当記事がお役に立ちましたらシェアして頂ければ嬉しいです。

0人

★ 当記事を閲覧の方は下記の【関連記事】も閲覧していました。

閲覧履歴(直近10件)

◎zanmai.netサイト記事の転載・複製（コピー）は、zanmai.netへのリンクであることを明記してください！
◎本記事URL: https://www.zanmai.net/blog/data/260.html

閉じる

マウスホイールでテーブルを左右及び上下スクロールさせる_ブログ_zanmai.net

※会員の方は認証コードを要らないから、新規登録をオススメ！