質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

1732閲覧

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

Hiyoko_mochi

総合スコア30

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2021/07/14 05:44

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に記述しています。

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

よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

上に追加するには

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

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

sample

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

PHP

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

javascript

1<style> 2body{ 3margin:0; 4} 5.content:not(:first-child){ 6border-top:solid 0px; 7} 8.content{ 9height:200px; 10border:solid 1px gray; 11} 12</style> 13<script> 14window.addEventListener('DOMContentLoaded', ()=>{ 15 window.scroll({top:200}); 16}); 17window.addEventListener('scroll', ()=>{ 18 const top=document.body.getBoundingClientRect().top; 19 if(top>=0){ 20 fetch("api.php").then(res=>res.text()).then(txt=>{ 21 document.body.insertBefore(Object.assign(document.createElement('div'),{className:'content',textContent:txt}),document.querySelector('.content')); 22 window.scroll({top:200}); 23 flg=false; 24 }); 25 } 26}); 27 28</script> 29<div class="content"> 30test 31</div> 32<div class="content"> 33test 34</div> 35<div class="content"> 36test 37</div> 38<div class="content"> 39test 40</div> 41<div class="content"> 42test 43</div>

投稿2021/07/14 06:01

編集2021/07/14 07:03
yambejp

総合スコア116724

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Hiyoko_mochi

2021/07/14 06:14

ご回答ありがとうございます。 LINEやカカオのように上に続き(過去のデータ)を表示させたいので、ずれに関してはそこまで意識はしていませんでした。 基本的に5~10件ずつ表示するようにindex2.htmlなどには記載していますので、 >追加する要素の高さを0にしておくか 0であれば好ましいですが、CSSなどで調整はできるかなとも考えています。 >追加したものと同じ高さ分だけ下にスクロールをさせるか 上記で言いますと、スクロールはしなくても良いと思っています。 よろしくお願いします。
yambejp

2021/07/14 06:19

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

2021/07/14 06:48

ご回答ありがとうございます。 仰っている意味を間違って解釈していたようです。 失礼しました。 知見が足りない為、現状ですと上に次のページを表示させる事自体が上手くいっていないので、それ以前の状態なのですが、逆に言えば上に追加したときにスクロールさせてしまう事を込みで考えれば良いと言うのは理解していますが、その場合は https://hacknote.jp/archives/30885/ 上記が参考になるかとは考えています。
yambejp

2021/07/14 07:04 編集

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問