ヘッダーとフッターを除外して画面縦幅を固定スクロールできるScrollify

ぴたっと画面上にくっつく？

画面の縦幅を固定してスクロール？

セクションごとにスクロール？

・・あれは何？

「スクロールスナップ」やない？

CSS のプロパティ「scroll-snap-type」は、スクロールしたときに指定したスナップポイントを画面上に固定することができます。

ちょっと試してみましたが、ちょっとがたつく感じがして微妙だったので、jQueryで実装することにしました。

今回は、簡単にスクロールスナップを実装することができる「jQuery Scrollify」の紹介です。

とりとん

スクロールスナップって何？

という方はデモでスクロールしてみてください⬇️

DEMO

See the Pen Scrollify by とりとん (@darakerutoriton) on CodePen.

「jQuery Scrollify」では、オプションを1行追記するだけでヘッダーとフッターを除外することができので、使い勝手がいいです！

とりとん

早速使い方を見てみよう！

この記事の内容は・・

jQuery Scrollifyの使い方
コピペ用コードと簡単な解説
まとめ

jQuery Scrollifyの使い方

GitHubからダウンロードするか、CDNを使って「jQuery Scrollify」と「jQuery」を読み込みます。

GitHubからダウンロード

こちらからファイルをダウンロードしてください。

ダウンロードしたファイル中の「jquery.scrollify.js」と、jQueryを<head>～</head>に⬇️のように記述して読み込みます。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <!--省略-->
    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/jquery.scrollify.js"></script>
</head>

CDNを使って読み込む

CDNを使う場合は以下のように記述してください。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <!--省略-->
　　<script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery-scrollify@1/jquery.scrollify.min.js"></script>
</head>

※footerに記述しても効かないので、headerに記述してくださいね！

コピペ用コードと簡単な解説

JavaScript

var option = {
  section : '.js_section',//スクロールスナップを実装するコンテンツ
  interstitialSection : "header,footer",//除外するコンテンツ
};
$(function() {
  $.scrollify(option); //実行
});

2行目「section」：スクロールスナップを実装するコンテンツを括ったクラス名

3行目「interstitialSection」：除外するコンテンツ(今回はヘッダー・フッター両方除外)

※(例)フッターのみ除外したい場合→”footer”と記述したらOK！

HTML

<header>header</header>
<section class="section_1 js_section">❶<br><span>- 1ページ目 -</span>
</section>
<section class="section_2 js_section">❷<br><span>- 2ページ目 -</span>
</section>
<section  class="section_3 js_section">❸<br><span>- 3ページ目 -</span>
</section>
<footer>footer</footer>

CSS

body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
header, footer {
  text-align: center;
  color: #fff;
  background-color: #938879;
  padding: 30px 0;
}
section {
  color: #fff;
  font-size: 30px;
  text-align: center;
  padding: 30px;
}
section 　span {
  font-size: 10px;
}
.section_1 {
  background-color: #EBBB5C;
}
.section_2 {
  background-color: #597D56;
}
.section_3 {
  background-color: #465A7D;
}