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

テクノロジーカテゴリーの変更を依頼記事元:

coliss.com

46users がブックマークコメント

記事へのコメント6件

注目コメント
新着コメント

kazuyadesse ジャバス( ´ ▽ ` )ﾉ

2013/06/04 リンク

nors http://benoit.pointet.info/stuff/jquery-scrollsnap-plugin/

2013/06/03 リンク

imo758 こういうメインのスクロール操作に非同期な補正を『一律に止めたい』んだが、どうするのがいいんかねえ。スクロール毎にJavaScriptが走るのか凄く重いし、意図的に見切らせて位置調整とかができない。

2013/06/03 リンク

fushimik これ、使いそう！

2013/06/03 リンク

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

2013/06/03 リンク

OfficeRiverHead ユーザーがページをスクロールした時、見出しや画像が見切れてしまう、ストライプの背景で違うカラーが少し見えてしまうなど、ちょっとだけスクロール位置がうまくない時に自動で補正するjQueryのプラグインを紹介し

2013/06/03 リンク

注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

リンクを埋め込む

以下のコードをコピーしてサイトに埋め込むことができます

<iframe marginwidth="0" marginheight="0" src="https://b.hatena.ne.jp/entry.parts?url=https%3A%2F%2Fsiteproxy.ruqli.workers.dev%3A443%2Fhttps%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fjavascript%2Fjquery-plugin-scrollsnap.html" scrolling="no" frameborder="0" height="230" width="500"><div class="hatena-bookmark-detail-info"><a href="https://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-scrollsnap.html">[JS]スクロールした際に見出しや画像やエリアなどが見切れるのを自動補正するスクリプト -Scrollsnap</a><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/javascript/jquery-plugin-scrollsnap.html">はてなブックマーク - [JS]スクロールした際に見出しや画像やエリアなどが見切れるのを自動補正するスクリプト -Scrollsnap</a></div></iframe>

プレビュー

規約違反を報告

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

ユーザーがページをスクロールした時、見出しや画像が見切れてしまう、ストライプの背景で違うカラーが... ユーザーがページをスクロールした時、見出しや画像が見切れてしまう、ストライプの背景で違うカラーが少し見えてしまうなど、ちょっとだけスクロール位置がうまくない時に自動で補正するjQueryのプラグインを紹介します。 Scrollsnap Scrollsnapの特徴 Scrollsnapのデモ Scrollsnapの使い方 Scrollsnapの特徴 Srollsnapはスクロールでのユーザエクスペリエンスを強化するjQueryのプラグインで、ページ内の指定したポイントの上下でスクロール移動が止まってしまったら、自動的にちょうどいい位置にスナップさせます。スナップ時のポイントはclassで設定可なので、テキスト・見出し・画像をはじめ、div要素やarticle要素などにも設定できます。対応ブラウザデスクトップ用の最新のブラウザをはじめ、IE9、スマフォ用のSafariにも対応しています。