スムーズスクロールの「戻る」を正常化する　JavaScript

JavaScript ページ内リンクスムーズスクロール

1.history.pushStateが使える場合それで解決。IE10以上のすべてで使える。 *移動後に location.replace("#" + target.id) でハッシュを活性化?しないとtarget疑似クラスが有効にならないのでそれだけ注意。 location.hash = target.idだとGChromeで:target…

2013-05-25

scrollTopMaxを取得する JavaScript

JavaScript 位置-サイズ

element.scrollTopMaxは現在Firefoxだけにあるプロパティで、要素の最大スクロール可能量を返す。読み取り専用。window.scrollMaxYのelement版。これは他のブラウザなら element.scrollHeight - element.clientHeight で求められると思っていたが違った。 …

2013-05-24

clearInterval(timer) のtimerは数字

JavaScript

var timer = setInterval(fn, 100)のtimerは何なのかと思ったら数字だった。この数字はsetInterval/setTimeoutが実行されるとインクリメントされ、スコープに関わらずwindowで共通。以下のコードで確認できる。 (function(){ var timer = setTimeout(functi…

2013-05-24

Firefox　開発者ツールバーのJavaScript整形機能

JavaScript

Firefoxには標準でjs-beautifyと同じ整形機能がついている。 F2で開発者ツールバーを開き、「jsb」と入力すればあとは案内に従うだけ。特徴として、オンライン上のファイルでも、ローカルファイルでもURL/パスを指定すればで整形できることがある。使い方 …

2013-05-24

配列のすべてにアクセスする記述いろいろ JavaScript

JavaScript

document.getElementsByTagNameとか配列（風）のもの全てになにかしたい時にi

2013-05-21

setTimeout(fn, 1000 / 60) の 1000/60 は16として処理される

JavaScript

requestAnimationFrameの代わりに書かれていることがありますが、単純に16と書いたら良いと思います。 JavaScriptでぴったりの時間で処理はできないのでこだわるポイントではありませんが(';') ちなみにscrollTo(0, 1.9)だと小数点切り下げでpageYOffsetは1…

2013-05-20

スクロール位置が取れない htmlやbodyにoverflowを指定するときは注意

JavaScript 位置-サイズ CSS

html, bodyはページサイズ・ウィンドウサイズを決定する要素です。これらにoverflow, height:100%などサイズに関わるスタイルを指定するとJavaScriptによる位置やサイズ取得に支障が出ることがあります。よほどの理由がない限りしてはいけません。スタイル…

2013-05-14

getElement, querySelectorがないときの戻り値

JavaScript

HTMLCollection, NodeListは該当する要素がなくても常に戻り値があるので注意がいる null (ID) document.getElementById("hoge") document.querySelector("#hoge") HTMLCollection (querySelectorAll以外の複数) document.links, forms, etc document.getEle…

2013-05-13

ページの表示に関するイベント : JavaScript

JavaScript

ページを開いたとき document readystatechange (interractive) document DOMContentLoaded ここで構築完了 document readystatechange (complete) window load window pageshow ページを閉じたとき window beforeunload これ以降は閉じた後 window pagehide…

2013-05-11

ブラウザの戻ると進むを無理やり判別する

ページ内リンクスムーズスクロール JavaScript

かなり無理やり pushStateが使えない環境での話スムーズスクロールの戻る/進むを正常化するだけならスムーズスクロールについて無駄に考えてみたメモのTest4, Test5を参照してください。ここに書いてある方法は無理やりです。

2013-05-10

hashの追加について location.hash history.pushState

JavaScript ページ内リンクスムーズスクロール

popstateも起きるので追加しないと・・・ location.hashでハッシュを付与したとき onhashchange, onscroll片方のみ起きる、両方起きる、両方起きないの４パターン現在のハッシュと代入するハッシュが異なる … ハッシュが変わり(onhashchange)、履歴が追加…