Supertrue walfo

JavaScript, 上から下へ下から上へ, えんえんスクロール

上についたら下へ、下についたら上へ。無限にくるくる回るえんえんスクロール。
michelrefatti.meを見ていて、おもしろそうだったので試しに作ってみますよと。

概要

“スクロールしながら、上についたら下へ。下についたら上へ。” 少し抽象度を下げて考える。

抽象 少し下げ
スクロールしながら スクロール量が
上についたら下へ 0を下回ったらページ下部へ
下についたら上へ スクロール限界値(*)を上回ったらページ上部へ

*スクロール限界値 = [ページ下端のY座標 – 画面の高さ]

なので、必要な要素(数値)は

  • スクロール量
  • 0
  • ページ下端のY座標
  • 画面の高さ(window.innerHeight)

実装

スクロール量と最下部を求めれば、仕事の8割は終わり。

// スクロール量はbodyのtopを正負反転して使う
scrolltop = body.getBoundingClientRect().top * -1;

// ページ下端のY座標はbodyの高さを使う
bottom = body.getBoundingClientRect().height;

完成形

window.addEventListener('scroll', loopScroll(this));

function loopScroll(window) {
  var body = root.document.body;
  var top = 0; // 上端の座標
  var bottom = body.getBoundingClientRect().height; // 下端の座標
  var buffer = 32; //境目調整用のMagicNumber
  var scrolltop = 0; // スクロール量を入れる変数
  var viewport = 0; // window.innerHeight を入れる変数

  return function() {
    // 最新のスクロール量を取得
    scrolltop = body.getBoundingClientRect().top;
    // 最新の window.innerHeight を取得
    viewport = window.innerHeight;

    // scrolltop が 0 を下回ったら上へ
    if (scrolltop <= top) {
      return root.scrollTo(0, bottom + buffer);
    } else 
    // scrolltop が スクロール限界値を上回ったら下へ
    if (scrolltop >= (bottom - viewport)) {
      return root.scrollTo(0, buffer);
    }
  }
}

// * buffer は境目調整用のマジックナンバー(根拠の無い数値)
//   0にする(調整をしない)と境目で上下のワープが氾濫する

See the Pen Loop Scrolling by keri (@kesuiket) on CodePen.

リンク

おわり

2015年6月23日 16:10
2015年6月24日 12:16 編集済み