on:2013年6月3日sponsorsユーザーがページをスクロールした時、見出しや画像が見切れてしまう、ストライプの背景で違うカラーが少し見えてしまうなど、ちょっとだけスクロール位置がうまくない時に自動で補正するjQueryのプラグインを紹介します。ScrollsnapScrollsnapの特徴ScrollsnapのデモScrollsnapの使い方Scrollsnapの特徴Srollsnapはスクロールでのユーザエクスペリエンスを強化するjQueryのプラグインで、ページ内の指定したポイントの上下でスクロール移動が止まってしまったら、自動的にちょうどいい位置にスナップさせます。スナップ時のポイントはclassで設定可なので、テキスト・見出し・画像をはじめ、div要素やarticle要素などにも設定できます。対応ブラウザデスクトップ用の最新のブラウザをはじめ、IE9、スマフォ用のSafariにも対応しています。9ScrollsnapのデモデモはIE9を含む、最新のモダンブラウザでご覧ください。デモページデモでは、ページ内の各要素の上に「snap」という破線があります。「snap」に注目ページをスクロールしてみます。「snap」の位置が上下50pxの範囲でスクロールが止まってしまった場合、スクリプトが発動します。設定した位置に自動でスクロールページの背景がストライプとか、見出しがきれるのがイヤとか、スクロールして上端がきれるのを防ぐことができます。Scrollsnapの使い方Scrollsnapの使い方は、非常に簡単です。外部ファイルスクリプトを外部ファイルとして、記述します。HTMLきれるのを防ぎたい要素に、classなどを追加します。※classは変更可能です。JavaScriptScrollsnapを設定したエレメントを指定し、発動する上下のピクセル量を設定し、スクリプトを実行します。