JavaScript

jQueryでappendやprependで要素を追加した後にスクロールさせない(要素に移動させない)方法【コード付きで解説】

ネットサーフィンする人

 

あなた
jQueryで要素を動的に追加した後に、その要素にスクロールで移動させない方法ってありますか?

 

今回はこのような疑問に答えていきます。

 

jQueryでappendやprependで要素を追加した後にスクロールさせない(要素に移動させない)方法

 

先日、メッセージの追加読み込み機能を開発していたところ、「さらに読み込むボタン」を押してprependで追加すると、追加した要素にスクロールで移動してしまいました。

そこで、移動させないようなコードを書いたので紹介します。

 

実際のコード

 

HTML側のコードとJS側のコードをそれぞれ紹介します。

なお、HTML側はすでに動的に要素が追加された後のものとします。

(rowというクラスの要素を追加したとします。)

 

↓HTML

<div class="message-container" style="overflow: auto; height:24rem;"> //ここからスクロール要素
    <div class="message-area">
        <div class="message-body" id="scroll-content">
            <div class="message-bodey-buttuon">
                <div class="more-read-button text-center">
                    <button id="more-read-button-1">さらに読み込む</button>
                </div>
            </div>
            <div class="all-content">
//動的に追加した部分 -- start --
                <div class="row">
                    <span class="text-right block text-xs message-body-time">8:44</span>
                    <span class="text-right block message-body-content" id="message-id-1">おはよう</span>
                </div>
//動的に追加した部分 -- end --
                <div class="row">
                    <span class="text-right block text-xs message-body-time">8:44</span>
                    <span class="text-right block message-body-content" id="message-id-2">おはよよう</span>
                </div>
                <div class="row">
                    <span class="text-left block text-xs message-body-time">21:25</span>
                    <span class="text-left block message-body-content" id="message-id-3">テスト</span>
                </div>
            </div>
        </div>
    </div>
</div>

 

↓JS側

const scrollToElm = $( `#message-id-2` ).parent().position().top; //all-contentからの距離を取得
const buttonHeight = $( ".all-content" ).position().top; //message-bodyからの距離を取得
const nowScrollHeight = $( ".message-container" ).scrollTop();  //現在のスクロールの距離を取得
$( ".message-container" ).scrollTop( scrollToElm - buttonHeight + nowScrollHeight ); //要素追加前の位置にスクロールを移動させる

 

実装のポイントをいくつか解説していきます。

 

ポイント①:スクロールさせない→元の位置までスクロールするという発想に転換

 

「要素追加時にスクロールさせたくない」という考えを「要素追加後に元の位置までスクロールする」という発想に転換しました。

先程のJSのコードの「$( ".message-container" ).scrollTop....」の部分です。

ちなみに、scrollTopは引数として、位置の値を渡すとその位置までスクロールしてくれます。

Description: Set the current vertical position of the scroll bar for each of the set of matched elements.

>>.scrollTop 公式ドキュメント

 

ポイント②:親要素からの距離をうまく算出して、スクロールさせたい距離を出す

 

position()メソッドを使って、親要素からの距離を算出して、スクロールさせる距離を取得しました。

後は先程のscrollTopに渡してあげればOKです。

Description: Get the current coordinates of the first element in the set of matched elements, relative to the offset parent.

>>.position 公式ドキュメント

 

移動した分をスクロールで戻してあげるイメージを持つと良い

 

「スクロールさせない」とかではなく、シンプルに、動的な要素追加のイベントで追加された要素の距離分をスクロールで戻してあげるイメージを持つと実装しやすいかなと思いました。

僕自身は、その考えに至るまで少しハマってしまったので...。

よかったら参考にしてみてください。

 

今回は以上です。

 

プログラミングスクールに関する情報

2021年最新プログラミングスクール おすすめランキング 【WEBエンジニアになりたい方向け】と書かれた画像
【無料あり】プログラミングスクールおすすめランキング【WEBエンジニアになりたい方向け】

  あなたプログラミングスクールに通いたいけどたくさんありすぎてどこがいいのかわかりません。   最近はエンジニアブームということもありプログラミングスクールが増えました。 一方でたくさんありすぎてど ...

続きを見る

フリーランス
無料あり:フリーランスを目指せるプログラミングスクールランキング【体験をもとに徹底分析しました】

  あなたフリーランスエンジニアを目指すことができるプログラミングスクールってありますか?   最近では、高年収や働きやすさの魅力からフリーランスエンジニアを目指す方も増えてきまし ...

続きを見る

返金保証ありのプログラミングスクールランキング【エンジニアが選びました】と表示されたパソコンの画面
返金保証ありのプログラミングスクールランキング【エンジニアが選びました】

  あなた返金保証がついているオススメのプログラミングスクールってありますか?   結論から話すと、返金保証つきのプログラミングスクールランキングは次の通りです。 1位:テックキャンプ  【転職成功率 ...

続きを見る

WEB系自社開発企業にいけるプログラミングスクールランキング【現役エンジニアおすすめ】と書かれた画像
WEB系自社開発企業にいけるプログラミングスクールランキング【現役エンジニアおすすめ】

  あなたWEB系の自社開発企業に就職したいです。 オススメのスクールを教えて下さい。   エンジニアを目指すにあたってまず最初に自社開発企業への転職を希望する方がほとんどです。 ...

続きを見る

プログラミンングスクールに無料で通うならココ【現役エンジニアおすすめ】と書かれた画像
プログラミンングスクールに無料で通うならココ【現役エンジニアおすすめ】

  あなたプログラミングスクールに通いたいけどどのスクールも何十万もして通えません。コスパよくエンジニアになれるスクールはありますか?   今回はコスパが良いどころか完全に無料でプ ...

続きを見る

-JavaScript

© 2021 エンジニアてんし君ブログ