ブラウザ版 slack での channel 一覧のサイドバーのスクロールを抑制する方法について

Question

前提・実現したいこと

現在、自分の力試しで chrome 拡張の開発をしています
拡張の内容は、ブラウザ版 slack（https://app.slack.com/...） にて、
自分の指定した channel だけを channel 一覧サイドバーの Starred（お気に入り）の前方に持って来る、
いわばお気に入りの中のお気に入りみたいなのを作る機能です

できていること

channel を表す div の DOM の一覧は getElementsByClassName('p-channel_sidebar__static_list').children で取得でき、この中で前方に持って来たい channel の div を getElementsByClassName('p-channel_sidebar__static_list')[0] に対して prepend することで見た目上の channel の順番を入れ替えることには成功しました

発生している問題

ところが、前方に持ってきた channel をクリックすると、「元々その channel が存在していた場所」までサイドバーのスクロール位置が自動的に変化してしまいます

質問内容

こういったサイドバーのスクロール位置の変更を抑制するための何かスマートな解決策は無いでしょうか？

できるかはわかりませんがスクロールを一時的に無効にしたり、スクロール処理に割り込んだり、処理を上書きしたりなどが考えられるのですが、調べてもあまり有用な解決策が見つからず、、

Javascript での開発経験があまりなく、あまり基本的なことを理解していないかも知れませんがよろしくおねがいします

Answer 1

検証環境が無いので正確な回答はできず申し訳有りませんが
window.onload なのか $(document).ready なのか読み込み時の実行処理の中にある、
「スクロールを実行しているJavaScriptイベント」を特定できれば、
その前に.preventDefault(); や .stopPropagation(); （jQueryなら.off()とか）等を挟むことでイベントをキャンセルできそうな気がします。

詳しい方からの回答がつくまでの参考検証程度にどうぞ。

Comments

[yamy]

アイデアありがとうございます
試しにサイドバー上で channel を構成する DOM たちに対して、 `onclick` 処理に `.preventDefault()` や `.stopPropagation()` を差し込んでみましたがサイドバーのスクロールを抑制することはできませんでした

教えていただいたアイデアも踏まえて別の案を考えてみます

[iss]

channelクリック時でしたね、失礼しました。
差し込み＆停止ダメでしたか、残念。

あと思いつく方法としては、channel のID（等のトリガーセレクタ）を書き換えて、実行処理ごとスクロール抜きのものに差し替えてしまうとか…

[yamy]

おそらくチャンネルサイドバーのスクロールと右側のメッセージペインの更新は同じ `onclick` で処理されてると思うので、`onclick` 処理の伝播を止めてしまうと、両方が実行されなくなるのだと思われます

実行処理ごとスクロール抜きのものに差し替えてしまうのでも確かに動作しそうですね
同じアイデアは思いついたのですが難しそうなので後回しにしていました

別の案ですが、自分の方でも試行錯誤してひとまずの実装はできました
チャンネルを `onmousedown` したときに、スクロールバーの div から `p-scrollbar__hider` という class を一旦外し、さらに `onclick` してから 0.1秒ほどした後に `p-scrollbar__hider` を戻すことでスクロールの抑制に成功しました

アイデアとしては slack 側からスクロール対象（ `p-scrollbar__hider` ）を一時的に見えなくして、スクロール処理を空振りさせるような感じです

ただし、0.1秒の間に slack 側からスクロール処理が飛んでこなければ、スクロール対象が再び slack 側から見えてしまうようになりスクロールが実行されてしまいますが、、
時間を伸ばせば伸ばすほど高い確率でスクロールを抑制できますが、その分ユーザがサイドバーをスクロールできるまでにかかる時間が伸びてしまうという、なんとも言えない実装になっています ;;

一応、slack からのスクロール処理が `p-scrollbar__hider` 戻しよりもなるべく先に実行されるよう、 `p-scrollbar__hider` 戻しは requestIdleCallback を使って優先度低く実行されるようにも工夫しています