jQueryでWebサイト内を無限にスクロール出来るようにする

ちょっと語弊があるかもですけど、無限に
スクロール出来るように見せる、みたいな
方法です。これが何の役に立つんですか
とか言われると困っちゃうんですけど・・・
こういうのがあってもいいかなと思ったの
でちょっと作ってみました。実装にはjQuery
を使います。

土曜日なのでちょっとネタ的な話題です。

数日前に「スクロールに応じて要素がアニメーションする、視差効果（パララックス）を取り入れたWebデザイン例とTipsいろいろ」っていう記事を書いたんですが、この中に App Galaxy by Googleっていうサイトとunfoldっていうサイトがありまして、ここが無限に縦スクロールできるようになってます。

これを実装しよう、という誰得な話です。

Sample

以下サンプルです。

Sample

コード

$(function(){
$("body").height($(window).height() + 2000 );　$(window).scroll(function() {
if 
($(window).scrollTop() >= ($("body").height() - $(window).height())) {　$(window).scrollTop(1);}
else if 
($(window).scrollTop() == 0) {　$(window).scrollTop($("body").height() - $(window).height() - 1);}});
});

本体と上記コードで動作します。

全体の高さにブラウザの高さを加えます（日本語合ってるかな？ｗ）。こうしてあげないとループ時にチカチカしちゃいます。

$("body").height($(window).height() + 2000 );

一番下に到達したら一番上に戻し、一番上に到達したら一番下に送ります。

if 
($(window).scrollTop() >= ($("body").height() - $(window).height())) {　$(window).scrollTop(1);}
else if 
($(window).scrollTop() == 0) {　$(window).scrollTop($("body").height() - $(window).height() - 1);}});

加えて、背景画像を繋ぎ目のないシームレスな画像にすれば無限にスクロール出来ているように見えますね。

横スクロールにしたければscrollTopをscrollLeftに、heightをwidthに変更すれば理屈上は実装出来ると思います。

css

body {
height: 2000px;
background: url("bg01.gif") ;
}

一応高さを指定します。

このまま使うと多分問題出ると思うので使うときは何かしら処理してください。

URLスペルミスしてたｗ