(44) 画面スクロールに合わせて動的にコンテンツを追加

投稿者: | 2018年7月23日

この記事は最終更新から 1188日 が経過しています。

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で動的にコンテンツを取得して表示する。 未着手


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)