div要素内の横スクロール量をjsを使ってリアルタイムで取得してその値をcssに反映させることで固定の列をスクロールに合わせて動かしたいです。
cssカスタムプロパティというのを試してみようとしたのですがIEでは対応していませんでした。
CSS カスタムプロパティ (変数) の使用
何か他にいい案を思いつく方がいましたら教えて下さい。
jsのコードのところにコメントで変えたい部分を記述しております。
ご協力お願いします。
html
1<!DOCTYPE HTML> 2<html> 3<head> 4 <meta http-equiv="content-type" content="text/html" charset="utf-8"/> 5 <title>横スクロールで固定列を移動</title> 6</head> 7<body> 8 <div class="area" id="target"> 9 <table> 10 <tr> 11 <td class="cant-move cb"> 12 <input type="checkbox"/> 13 </td> 14 <td class="cant-move"> 15 固定 16 </td> 17 <td class="cant-move"> 18 固定 19 </td> 20 <td class="can-move"> 21 移動 22 </td> 23 <td class="can-move"> 24 移動 25 </td> 26 <td class="can-move"> 27 移動 28 </td> 29 <td class="can-move"> 30 移動 31 </td> 32 </tr> 33 <tr> 34 <td class="cant-move cb"> 35 <input type="checkbox"/> 36 </td> 37 <td class="cant-move"> 38 固定 39 </td> 40 <td class="cant-move"> 41 固定 42 </td> 43 <td class="can-move"> 44 移動 45 </td> 46 <td class="can-move"> 47 移動 48 </td> 49 <td class="can-move"> 50 移動 51 </td> 52 <td class="can-move"> 53 移動 54 </td> 55 </tr> 56 <tr> 57 <td class="cant-move cb"> 58 <input type="checkbox"/> 59 </td> 60 <td class="cant-move"> 61 固定 62 </td> 63 <td class="cant-move"> 64 固定 65 </td> 66 <td class="can-move"> 67 移動 68 </td> 69 <td class="can-move"> 70 移動 71 </td> 72 <td class="can-move"> 73 移動 74 </td> 75 <td class="can-move"> 76 移動 77 </td> 78 </tr> 79 <tr> 80 <td class="cant-move cb"> 81 <input type="checkbox"/> 82 </td> 83 <td class="cant-move"> 84 固定 85 </td> 86 <td class="cant-move"> 87 固定 88 </td> 89 <td class="can-move"> 90 移動 91 </td> 92 <td class="can-move"> 93 移動 94 </td> 95 <td class="can-move"> 96 移動 97 </td> 98 <td class="can-move"> 99 移動 100 </td> 101 </tr> 102 <tr> 103 <td class="cant-move cb"> 104 <input type="checkbox"/> 105 </td> 106 <td class="cant-move"> 107 固定 108 </td> 109 <td class="cant-move"> 110 固定 111 </td> 112 <td class="can-move"> 113 移動 114 </td> 115 <td class="can-move"> 116 移動 117 </td> 118 <td class="can-move"> 119 移動 120 </td> 121 <td class="can-move"> 122 移動 123 </td> 124 </tr> 125 </table> 126 </div> 127 <div class="zahyou"><span id="output"></span></div> 128</body> 129</html>
css
1 <style type="text/css"> 2 .area{ 3 width: 600px; 4 height: 210px; 5 overflow: scroll; 6 } 7 table{ 8 border-spacing:0px; 9 width:1250px; 10 table-layout:fixed; 11 } 12 td{ 13 border:2px solid; 14 font-size:30px; 15 } 16 .cd{ 17 z-index:20px; 18 text-align:center; 19 background-color:#ffffff; 20 } 21 .zahyou{ 22 background-color: #aaaaaa; 23 width: 80px; 24 height: 50px; 25 } 26 .cant-move{ 27 height:50px; 28 width:200px; 29 z-index:20; 30 background-color: #ffffff; 31 position:relative; 32 left:0px; 33 } 34 .can-move{ 35 z-index:10; 36 height:50px; 37 width:200px; 38 } 39 </style>
js
1<script type="text/javascript"> 2var target = document.getElementById('target'); 3function yoko(){ 4 var target = document.getElementById('target'); 5 var posiLef = target.scrollLeft; 6 document.getElementById('output').innerHTML = posiLef; 7 //仮の値として300pxを設定していますがこの部分を取得してきた移動量に設定したいです。 8 document.styleSheets.item(0).cssRules.item(5).style.setProperty('left', '300px'); 9} 10target.onscroll = yoko; 11</script>
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。