Q&A
php
1test.php 2 3 4<?php 5 $mysql = new PDO('mysql:host=localhost;dbname=test;charset=utf8','root',''); 6 $sql = "SELECT * FROM (SELECT * FROM test ORDER BY id DESC LIMIT 20)as A ORDER BY id"; 7 $result = $mysql->prepare($sql); 8 $result->execute(); 9 ?> 10<!DOCTYPE html> 11<html lang="en" dir="ltr"> 12 <head> 13 <meta charset="utf-8"> 14 <link rel="stylesheet" href="modal1.css"> 15 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 16 <title></title> 17 </head> 18 <body> 19 20 <div class="display" id="main" style="background-color:skyblue;width:450px;height:300px;overflow:auto;margin-left:auto;margin-right:auto;"> 21 <?php while($row=$result->fetch(PDO::FETCH_ASSOC)): ?> 22 <p><?php echo $row['id'].':'.$row['name']; ?></p> 23 <?php endwhile; ?> 24 </div> 25 26 27 <script type="text/javascript"> 28 $("#main").scrollTop($(".display")[0].scrollHeight); 29 </script> 30 31 32 <script type="text/javascript"> 33 $(".display").scroll(function(){ 34 35 if($(this).scrollTop()==0){ 36 $.ajax({ 37 url:'test2.php', 38 type:'post', 39 data:{count:23} 40 }).done(function(data){ 41 $(".display").prepend(data); 42 }); 43 } 44 45 }); 46 </script> 47 </body> 48</html>
php
1test2.php 2 3<?php 4 $mysql = new PDO('mysql:host=localhost;dbname=test;charset=utf8','root',''); 5 $sql = "SELECT * FROM (SELECT * FROM test WHERE id<23 ORDER BY id DESC LIMIT 20)as A ORDER BY id"; 6 $result = $mysql->prepare($sql); 7 $result->execute(); 8 ?> 9 <?php while($row=$result->fetch(PDO::FETCH_ASSOC)): ?> 10 <p><?php echo $row['id'].':'.$row['name']; ?></p> 11<?php endwhile; ?>
＊DBには43個のレコードが挿入されています。
DBに登録されているデータをまず20個取り出し、それから画面の最上部までスクロールするとさらに20個取り出すようなシステムを開発しました。
システム自体は問題なく動作するのですが、画面の表示結果が少し思ったのと違います。
新たに20個呼び出した場合に画面表示位置がdisplayクラス内の一番上までスクロールされます。
これを新たに20個呼び出した時の表示位置を一番上までスクロールせずに呼び出た20個中の1個目のの要素で固定したいです。
どうすればいいですか？
回答1件
0
ベストアンサー
例えば、『呼び出た20個中の1個目の要素』に目印用のclass="mark"をつけて、
以下のように目標の要素にむけてスクロールさせるのはどうでしょうか。
js
1～ 2}).done(function(data){ 3 $(".display").prepend(data); 4 $(".display p.mark:first")[0].scrollIntoView(); // 追加 5}); 6～
投稿2020/05/18 15:55
総合スコア1217
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。