http://brandear.jp/

上記のサイトの下部のような、スクロールが終わったら出てくるものの実装方法を教えてください。
(同じにしたいです。)

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2015/06/06 15:33:40
  • 終了:2015/06/08 16:36:48

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4595ベストアンサー獲得回数19342015/06/06 16:59:02

多分、document.body の scroll イベントで、scrollTop を監視しているのだと思います。
こんな感じで。

window.addEventListener("load", function() {
    // body の scroll イベントを監視
    window.addEventListener("scroll", function() {
        var e = document.body;
        if (e.offsetHeight - (e.scrollTop + e.clientHeight) < 10) {
            alert("一番下に着いたよ!");
        }
    });
});
  • document.body
    • offsetHeight : 隠れている部分も含めた body の高さ
    • clientHeight : body の見えているエリア(ウィンドウ)の高さ
    • scrollTop : 見えているエリアのてっぺんの body の中での位置

scrollTop + clientHeight で、見えているエリアの底の位置になります。
先のコードでは 10ドットほど余裕を見てますが、気持ち的にはこういう判定をしています。

    //  if (e.offsetHeight - (e.scrollTop + e.clientHeight) < 10) {
        if (e.offsetHeight == e.scrollTop + e.clientHeight) {

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません