Jscrollの無限スクロールを逆向きで実装したい。

Question

Jscrollを使った無限スクロールを通常の下に表示ではなく、
上にスクロールした際にページ最上部に表示されるようにしたいと思っています。

試したこと

1ページ目はこのような感じで記述しています。

【index.html】
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscroll/2.4.1/jquery.jscroll.min.js"></script>
<script>
$(function(){
    $('.scroll').jscroll({
        nextSelector: 'a.next'
    });
});
</script>
<script type="text/javaScript">
function Jump() {
    location.href = "#new";
}
</script>
<div class="content">
<section>
    <div class="scroll">
        <a class="next" href="index2.html">次へ</a>

        <div class="box">
        5つめ
        </div>

        <div class="box">
        4つめ
        </div>

        <div class="box">
        3つめ
        </div>

        <div class="box">
        2つめ
        </div>

        <div class="box">
        <a name="new"></a>
        最新
        </div>
    </div>
</section>
</div>

上記のままだと従来の下にスクロールをして下に続きを表示させる事は出来ているのですが、

Qiitaに記載されているような上に表示をさせる事がどうしてもできませんでした。

やりたい事としては、
①上部へスクロールして2ページ目の読み込みが発動できるようにする
②上スクロール後に2ページ目の読み込み時にAjaxを実行して2ページ目のデータを取得する
③2ページ目のデータを、やり取りデータ表示している.boxに対してprepend指定し、.scrollの最初に表示させる

上記に伴い、このように記述を行いましたが、上スクロールに対応せず変わらず下スクロールでの表示でした。

<script>
$(document).on("turbolinks:load", function() {
    var i = 2;
    $(".content").scrollTop(1);
    $(".content").scroll(function() {
      if (($(".content").scrollTop() == 0) && (i <= parseInt($(".message_view").find("a.next").prop("search").match(/[0-9]/), 10))){
        $.ajax({
          url: $(".message_view").find("a.next").prop("search").replace(/[0-9]/, i)
        }).done(function(data) {
          $(".scroll").prepend($(data).find(".scroll").html());
          $(".content").scrollTop($(".content").first().height());
          i++;
        })
      }
    })
  }
})
</script>

※.message_viewはindex2.htmlに記述しています。

記述内容が誤っている事は重々承知なのですが、かなりドツボにはまっている状態でして、お知恵をお借りできたら助かります。

よろしくお願いします。

Answer 1

上に追加するには

• 追加する要素の高さを0にしておくか
• 追加したものと同じ高さ分だけ下にスクロールをさせるか

ずれを考えると上への追加はあまり現実的ではないかと思います。

sample

※追加用のテストAPI
//api.php

<?PHP
session_start();
$_SESSION["num"]=isset($_SESSION["num"])?$_SESSION["num"]+1:0;
print $_SESSION["num"];

<style>
body{
margin:0;
}
.content:not(:first-child){
border-top:solid 0px;
}
.content{
height:200px;
border:solid 1px gray;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', ()=>{
  window.scroll({top:200});
});
window.addEventListener('scroll', ()=>{
  const top=document.body.getBoundingClientRect().top;
  if(top>=0){
    fetch("api.php").then(res=>res.text()).then(txt=>{
      document.body.insertBefore(Object.assign(document.createElement('div'),{className:'content',textContent:txt}),document.querySelector('.content'));
      window.scroll({top:200});
      flg=false;
    });
  }
});

</script>
<div class="content">
test
</div>
<div class="content">
test
</div>
<div class="content">
test
</div>
<div class="content">
test
</div>
<div class="content">
test
</div>

Comments

[Hiyoko_mochi]

ご回答ありがとうございます。

LINEやカカオのように上に続き（過去のデータ）を表示させたいので、ずれに関してはそこまで意識はしていませんでした。

基本的に5～10件ずつ表示するようにindex2.htmlなどには記載していますので、

＞追加する要素の高さを0にしておくか
0であれば好ましいですが、CSSなどで調整はできるかなとも考えています。

＞追加したものと同じ高さ分だけ下にスクロールをさせるか
上記で言いますと、スクロールはしなくても良いと思っています。

よろしくお願いします。

[yambejp]

上に追加したときにスクロールでずらさないと、常に最上部にいることになり新たなコンテンツの追加がとまらないのでは？

[Hiyoko_mochi]

ご回答ありがとうございます。

仰っている意味を間違って解釈していたようです。
失礼しました。

知見が足りない為、現状ですと上に次のページを表示させる事自体が上手くいっていないので、それ以前の状態なのですが、逆に言えば上に追加したときにスクロールさせてしまう事を込みで考えれば良いと言うのは理解していますが、その場合は

https://hacknote.jp/archives/30885/

上記が参考になるかとは考えています。

[yambejp]

一応、参考用のsample上げておきました
追加するコンテンツの長さを固定にしておけば
それなりに調整がききます
あとは実装にあわせて調整して下さい