Lightweight, high-performance JS plugin for detecting and manipulating elements in the browser. Github / Docs
Intro DOM のイベントリスナの仕様に Passive Event Listeners というオプションが追加された。 このオプションは、主にモバイルなどでのスクロールの詰まり(Scroll Junk) を解決するために導入されたものである。 今回は、この仕様が解決する問題と、本サイトへの適用を解説する。 Passive Event Listeners Spec Scroll Event の PreventDefault() 画面のスクロールに合わせたインタラクションを実装する場合、 Scroll Event にイベントリスナを登録する。 典型的な例では touchstart や touchend をフックし、その中で DOM の操作などを実施するなどがある。 場合によってはイベントリスナ内で preventDefault() を呼ぶことで、スクロールそのものを止めることもできる。
ページ内でアンカーリンクさせる場合、 何も設定しないと急激に動いてしまい、動きとしてあまり見栄えが良くないため、 jQueryなどJavaScriptを使ったスムーススクロールを導入することが多いです。 ただ、この場合、急激な動作を避けるために、<a>のクリックイベントに対して”return false;”をかけて、 実際にはリンクさせないようにするのですが、 CSS3ではアンカーリンクさせた要素に対してスタイルを設定することができる、 「:target」という疑似クラスがあり、 通常のスムーススクロールではこの「:target」を活かすことができません。 そこで、CSS3の「:target」疑似クラスに対応させられるスムーススクロールを考えてみました。 ↓作ってみたもの DEMO 方法 $(function(){ /*------------------------------- 通常の
JavaScriptおれおれAdvent Calendar 2014 – 21日目 よくある処理についてまとめました。 スクロールの監視 windowを対象にscrollイベントを監視するだけです。documentでも動くけど、古いIEは駄目。いちいち変える理由もないので、windowだけ使えばよろし。 $(window ).on('scroll', function(event){ console.log('window'); }); $(document).on('scroll', function(event){ console.log('document'); }); // IE 8では呼ばれない スクロール位置の取得 document.documentElement.scrollTopに現在のスクロール位置が格納されています。ちなみにdocument.documentElemen
ページ内スクロールのナビゲーションをサイドカラムに自動で実装する、というスクリプトのご紹介。見出しまでスクロールすると、ナビゲーションの方も連動してくれます。ユーザビリティとしてはなかなか。
スムーススクロールとは、ページ内リンクをクリックすると、スルスルッと目的の場所に移動するこれの事です。 設定する最大の長所は、ページ閲覧者にリンクの移動場所が視覚的に伝わりやすくなるという点で、結構多くのサイトで使われてます。 サンプルファイルの利用 解説読むの面倒臭いダメな人は、下記からファイルをダウンロード。 smoothscroll.zip(2kb) ダウンロードして解凍したら、scroll.jsをサイトにアップロード。 適用したいhtmlの<head>内に以下を追加。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script type="text/javascript" src="ファイルのパス/scr
「ページ内リンク スムーズスクロール」でググればいくらでも出てくるシロモノだけど、自分の要望をすべて満たすものが無かったので作ってみた。 こだわりのページ内リンクスムーズスクロール scrollsmoothly.js 動作サンプル 以下のソースコードをサンプルページのようにhead内で読み込むだけでOK。 ソースコード(Javascript) scrollsmoothly.js 読み込み例 <script type="text/javascript" src="scrollsmoothly.js"></script> 特徴 縦横斜めにスクロール可能 スクロール中にもリンクをクリック可能 別のページからのリンクでも指定の場所までスムーズスクロールします MIT License 動作確認ブラウザ IE6, IE7 Firefox 2,3 Opera 9.27 Safari 3.1 関連エントリ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く