[JS]スクロールした際に見出しや画像やエリアなどが見切れるのを自動補正するスクリプト -Scrollsnap

サイト構築 -JavaScript

Post on:2013年6月3日

Scrollsnapの特徴

Srollsnapはスクロールでのユーザエクスペリエンスを強化するjQueryのプラグインで、ページ内の指定したポイントの上下でスクロール移動が止まってしまったら、自動的にちょうどいい位置にスナップさせます。

スナップ時のポイントはclassで設定可なので、テキスト・見出し・画像をはじめ、div要素やarticle要素などにも設定できます。

対応ブラウザ

デスクトップ用の最新のブラウザをはじめ、IE9、スマフォ用のSafariにも対応しています。

chrome 24+
firefox 18
safari 5-6
iOS safari 5-6
internet explorer 9

Scrollsnapのデモ

デモはIE9を含む、最新のモダンブラウザでご覧ください。

デモページ

デモでは、ページ内の各要素の上に「snap」という破線があります。

「snap」に注目

ページをスクロールしてみます。

「snap」の位置が上下50pxの範囲でスクロールが止まってしまった場合、スクリプトが発動します。

設定した位置に自動でスクロール

ページの背景がストライプとか、見出しがきれるのがイヤとか、スクロールして上端がきれるのを防ぐことができます。

Scrollsnapの使い方

Scrollsnapの使い方は、非常に簡単です。

Step 1: 外部ファイル

スクリプトを外部ファイルとして、記述します。

<script src="demo/foundation/javascripts/jquery.js"></script>
<script src="src/jquery.event.special.js"></script>
<script src="src/jquery.easing.min.js"></script>
<script src="src/jquery.scrollsnap.js"></script>

Step 2: HTML

きれるのを防ぎたい要素に、classなどを追加します。
※classは変更可能です。

<h1 class="snap">見出し</h1>

Step 3: JavaScript

Scrollsnapを設定したエレメントを指定し、発動する上下のピクセル量を設定し、スクリプトを実行します。

<script type="text/javascript">
$(document).ready(function() {
    $(document).scrollsnap({
        snaps: '.snap',
        proximity: 50
    });
});
</script>