根本的な問題ですが、スマホやパソコンは画面の縦横幅が全然違いますし、
利用出来るフォントも違うので改行するしないでスクロールしたピクセル数は同じ事になるはずが無いのですが……
あーわかった!
ニコニコ静画と同じ事をJS上で再現したいのね。
下記はその想定で考えて行きます。
1.Web Workersを使ってcomment1つだけをスクロール量の一致した場合に表示する処理を並列に行う。
これは却下
そもそもWeb WorkerはDOMを触る普通のJavaScriptの用途からかけ離れたものです。
一応調べたらWeb WorkerでDOMを強引に触るライブラリが見つかりましたが、
documentオブジェクトがないので相当つらそうです。
何かあれば自己責任で出来るのなら試して見れば良いですが、出来なければやり直しです。
Worker DOM - Web WorkerでDOM操作を実現
2.データベースから取得したデータが格納された配列をスクロール量でソートし、昇順に値を取り出して処理する。
やるとすればこれですかね。
冗長にならないよう、初期処理を済ませてしまえばどうとでもなるでしょう。
この辺を参考にしてっと
【jQuery】スクロール量に応じて発火するサンプルコード
JavaScript
1$(() => {
2 // ソートする必要があるならば、ここでソートすればいいし、HTML吐き出す時にソート済みのものを渡しても良い
3 let comments = [
4 {comment: "test", scroll: 123},
5 ];
6
7 // スクロール時のイベント登録
8 $(window).scroll(() => {
9 if (comments.length === 0) return;
10 const scroll = $(window).scrollTop();
11
12 const targets = [];
13 for (let comment of comments) {
14 if (comment.scroll > scroll) break; // ソート済み想定なのでこうすれば速度が出る
15 targets.push(comment)
16 }
17 if (targets.length === 0) return;
18
19 for (let comment of targets) {
20 // TODO:ここにコメントを画面上に表示するコードを書く
21 }
22
23 // 色々案はあるが、複数回shift実行するのは遅かったと思うので今回はsliceを活用
24 comments = comments.slice(targets.length);
25 })
26})
未確認ですがざっとこんな感じになるでしょう。
細部多少変なところはあるかと思いますが、そんなに速度面でダメージになることはないと思います。
DOM操作に関してですが、
予めコメントをdisplay: hidden
やleft: 100%
等で隠しておき、クラス付与によるCSSアニメーションを活用すればパフォーマンスをあまり損ねないかと思います。