2,740 views
この記事は最終更新から 2233日 が経過しています。
1. やりたいこと
表示中の画面を最下部までスクロールしたときに、画面の最下部にコンテンツを追加したい。
2. やってみた！
Step 1 : 最下部に次々と矩形を表示
まずは Step 1 として、スクロールしたときにページ最下部に次々と矩形が表示されるようにしてみる。
script.js
$(document).scroll(function(){
var winT_px = $(window).scrollTop(); // Window上端までのスクロール量
var winH_px = $(window).height(); // Window高さ
var docH_px = $(document).height(); // 表示物全体の高さ
var winB_px = winT_px + winH_px; // Window下端までの高さ
var diff = docH_px - winB_px; // 表示物全体の下側の非表示分の高さ
if(diff < 100){ // 非表示は残り100px未満？
$('#contents').append('<div class="child"></div>'); // 新たな矩形を表示
}
});
style.css
@charset "utf-8";
div.child{
height: 1500px;
background-color: #aaa;
margin: 30px;
}
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="./style.css" /> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script type="text/javascript" src="./script.js"></script> </head> <body> <div id="contents"> <div class="child"></div> </div> </body> </html>
実行サンプルはこちら。
https://www.dogrow.net/hp/sample/00044/step1/
Step 2 : 最下部に次々と写真を表示
Ajaxで動的に写真のURLを取得して表示する。 未着手
Step 3 : 最下部に次々とコンテンツを表示
Ajaxで動的にコンテンツを取得して表示する。 未着手