スクロール イベント リスナーが要素に追加されましたが、scrollTop が 0 に等しくない場合にのみ正しく移動します

Question

そこで私は、完了したタスクとアクティブなタスクという 2 つのリストがあるこの小さなスクリプトを作成しました。ボタンをクリックするとタスク リストを切り替えることができ、[詳細情報] をクリックするとタスクの詳細情報を読むことができます。 「詳細情報」をクリックすると、新しい div 要素が作成され、そのホスト要素の Y 位置を追跡したいのですが、途中までは機能します。 これは次のようになります: ここに画像の説明を入力してください

これはバグです。このエラーは、スクロール可能な要素 scrollTop が 0 ではない場合に発生すると確信しています (これは正しい方法で作成されており、スクロールを開始するたびにすぐに飛び上がってミッションをカバーします)それ自体): ここに画像の説明を入力します。

これは、スクロールの px 量、スクロール方向、「詳細情報」 div 要素の移動を識別するコードの部分と、それを作成する部分です。これがどこにあるのかわかりません。問題は、私がコーディング全般に関してまだ初心者で、css/html にあまり詳しくないためです。

リーリー

HTML と CSS スニペットを追加しますが、これは私が受講しているコースの講師が書いたものなので、必要ないと思います。

これは HTML スニペットです:

リーリー

関連する CSS スニペットは次のとおりです:

リーリー

Answer 1

この問題は CSS で解決できます。JavaScript コードから以下を削除できます:

リーリー

代わりに、次の内容を追加して CSS を変更します:

リーリー

これを行うには、JavaScript コードで作成する div.card 要素が、対応する li.card 要素の子である必要があります。また、私は（おそらく間違って）あなたの元のコードが 前に見つけたコード に似ていると仮定し、元のコードを実行できなかったため、質問のコメントに投稿しました。

あなたの position:absolute は、li.card 親の位置が明示的に設定されておらず、デフォルトで static になっているため、最初は機能しません。

編集z-indexビットについて言及するのを忘れていました。情報ボックスが完全に表示されないため、これが必要です (次の li.card 要素の下に表示されます)。