要素の端にマウスポインタが到達した場合に、scroll処理を走らせたい

Question

前提
Angular 12
TypeScript 4.3.2

タイトルの通り,　スクローラブルな要素の端にマウスポインタが来た場合に、scroll処理を走らせたいと考えています。

selectタグのmultiple属性を付与した際の挙動をdivタグのみで実装しようとしています。
現状以下のように選択肢の一番下までマウスをdragした際に自動的にスクロールするように実装しようとしています。(グレーの部分は選択されている要素)

選択肢が含まれている要素の最上部、最下部にマウスが到達したことを検知する方法を教えて頂きたいです。

何かお分かりになる方がいらっしゃいましたら、コメントいただけると助かります。

Answer 1

親の div の mousemove イベントリスナで、

• マウス座標がdivの上部Nピクセルの内なら、div.scrollBy(0, -定数) を実行するインターバルタイマーを開始する
• マウス座標がdivの下部Nピクセルの内なら、div.scrollBy(0, 定数) を実行するインターバルタイマーを開始する
• マウス座標がそれ以外なら、上記インターバルタイマーをキャンセルする

moseuup などで選択モードを終了するときのインターバルタイマーをキャンセルします。

Comments

[BadXO]

ご回答ありがとうございます。
すみません。Nピクセルというのが理解できないのですが、教えていただけますでしょうか？

[int32_t]

Nは自動スクロールを発動させる領域を決めるためのてきとうな定数です。
1項目の高さの半分より小さい値がおすすめです。

[BadXO]

遅くなりました。ありがとうございます。スクロールに関しては実装できそうです。