Q&A
あ、すいません。
これは他のブラウザでは実現ができていて、IEのみ実現できないということでしょうか。
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件
0
自己解決
どうやらIEではcssに変数を使うことができない可能性が高いです。
CSS変数が使えない
これも地味に困りますね。
例えば、サイト上でよく使うカラータグなんかを変数として保持するパターンがあるかと思いますが、
それがIEでは適用されません。
CSS変数について詳しくは以下をご覧ください。
https://developer.mozilla.org/ja/docs/Web/CSS/Using_CSS_variables
これに関しては、IEだけは割り切って変数を使わずに
CSSの値を指定してあげるしかないかもしれないですね。
投稿2020/07/20 05:33
総合スコア20
0
scrollイベントでスクロール量を取得・代入することで可能です！
1.固定要素をabsoluteに設定する。
2.横スクロール量を取得して、leftに値を設定する。
3.スタート位置ではleftに0を設定する
投稿2020/07/17 18:23
編集2020/07/17 18:25総合スコア271
回答ありがとうございます。
今回はwindow.onscrollではなくid="target"のdivタグのelement.onscrollでやっているのでabsoluteを使ってしまうとdivタグから要素がはみ出してしまうのでここが悩みどころなんです。
jsを使えば横スクロールに合わせて動的に固定列のleftを変えられるのではないかと思い方法を調べてみたところcssカスタムプロパティというものを見つけました。しかし添付してあるリンク先のブラウザごとの対応表よりieは対応していないということを知りました。
他の方法を探してみたのですがjsで取得した値をcssに代入する方法がなく、あるのはボタン押下などをきっかけにcssの値を固定値で置き換えるというものでした。
なんとかcssにjsで取得した値を代入する方法はないでしょうか？
もしご存じでしたら情報を頂けると嬉しいです。
単なる横スクロールという情報しか載せていなかったので「div要素内の横スクロール量をjsを使ってリアルタイムで取得してその値をcssに反映させることで固定の列をスクロールに合わせて動かしたいです。」に質問文を修正しました。説明不足で申し訳ございませんでした。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。