javascriptで連動スクロールさせるときの、もっと良い書き方を教えてください。

Question

javascriptのもっと良い書き方を教えて頂きたいです。

今こちらのようにjavascriptで連動してスクロールさせている表があるのですが、
https://jsfiddle.net/r0sc5031/

ご覧のように表が２つになると、１つ目の表しか連動スクロールが効きません。

そこで次のようなjavascriptを書き足せば２つ目も連動してくれます。

<script type="text/javascript">
function $E(id){ return document.getElementById(id); }
function scroll(){
   $E("header_h2").scrollLeft= $E("data2").scrollLeft;// 左右連動させる
   $E("header_v2").scrollTop = $E("data2").scrollTop;// 上下連動させる
   }
$E("data2").onscroll=scroll;
</script>

しかしもちろん、この場合は２つ目の表のHTMLの当該か所のidを、「header_h」から「header_h2」へ、「header_v」から「header_v2」ｈへ、「data」から「data2」、と書き換えなければなりません。

今回はそのようなidの書き換えをすることなく、２つの表がそれぞれ連動するようなjavascriptの書き方がないものかと思い質問させて頂きました。

つまり「header_h」や「header_v」や「data」というidだけで２つの表がそれぞれ連動するようなスクロール機能が欲しいのです。
(idじゃなくてclassでもいいのですが、それでも同じclassであって欲しいです。)

「表が複数になってもそれぞれスクロールせよ」という魔法の一言、、ないでしょうか？

お詳しい方、どうぞよろしくお願い致します。<(_ _)>

Answer 1

知っての通り、重複するidはつけられないのですべてclassに置き換えます。

<!-- イメージ -->
<div class="x_data_area">
 <table class="csTbl"></table>
 <div class="header_h"></div>
 <div class="header_v"></div>
 <div class="data"></div>
</div>

targetプロパティにより発生源がわかるので、そこからたどればいいでしょう。

function scroll(event) {
  let target = event.target;
  target.parentElement.querySelector('.header_h').scrollLeft = target.scrollLeft;
  target.parentElement.querySelector('.header_v').scrollTop = target.scrollTop;
}

https://developer.mozilla.org/ja/docs/Web/API/Event/target

Comments

[退会済みユーザー]

ありがとうございます!!
そっか、idは重複できないんでしたね。

早速やってみました。
https://jsfiddle.net/r0sc5031/1/

ありゃ。
何か足りないのか、うまく作動してくれない様子です。

きっとリンク先にヒントがあるのかとは思いますが、ちょっと素人すぎて太刀打ちできず、、(>_<)

よろしければもう一声、頂戴できませんでしょうか…？

[x_x]

onscroll はどうしましたか？ addEventListenerでもいいですが。どこからも呼ばれていないみたいです。

[x_x]

addEventListenerの例。
Array.from(document.getElementsByClassName('data')).forEach(function(element, index, array) {
element.addEventListener('scroll', scroll, false);
});

[退会済みユーザー]

overscrollですよね。最初それかなと思い、なんとなく元あった
$E("data").onscroll=scroll;
だけ追加してみたのですがダメでして、結局聞いてしまいました。

おお~！できました！
そんなに複雑なやつを書かないとダメだったのですね。難関でした。

どうもありがとうございます！！
本当に助かりました。<(_ _)>