1. マウススクロールに応じたイベント処理
JavaScript で生成した DOM Element を、マウススクロールに合わせて移動させたい。
位置を固定する
要素を固定するには、CSS の position 属性を absolute にする。これにより、イベント処理をしなければ、マウススクロールしても固定した位置に留まる。
スクロール量を知る
JavaScript で、スクロール量を知るには、window オブジェクトの scrollY プロパティを利用する。scrollY は、
文書が垂直スクロールされているピクセル数を返します。
イベントの設定
エレメントにイベントを設定するには、
を使う。このメソッドの使い方は、以下を参照。
マウスホイールの動きに対応するには、 Gecko-Specific DOM Events – MDC の DOMMouseScroll を使う。
The
DOMMouseScrollevent is sent when the mouse wheel is moved. The target of this event is the element that was under the mouse pointer when the mouse wheel was scrolled, similar to the click event.
これにより、マウスホイールをスクロールさせたときに、直下にある要素にイベントが伝わる。
イベントの要素への伝わり方は、以下を参照。
まずドキュメントツリーの上から下に向けてイベントが伝搬します。これをキャプチャー・フェーズと呼びます。
次に目的の要素にイベントが伝搬しますが，これをターゲット・フェーズと呼びます。ちなみに，この目的の要素のことを，ターゲットノードと呼びます。
しかし，ここで終わりではなく，さらに今度はターゲットノードからドキュメントツリーの上に向けてイベントが伝搬します。この段階をバブリング・フェーズと呼びます。
このように，W3C DOMイベントモデルでは，ドキュメントツリーの上からイベント発生源まで伝搬し，そして，今度は逆の方向に伝搬するという概念を持っています。イベントは，そのイベントが発生した部分だけでしか認識されないわけではない点に注意してください。
2. 例
HTML の div 要素を作成し、マウススクロールに合わせて移動させる。
var newElem = document.createElement("div");
var p = document.body.firstChild;
newElem.innerHTML = "挿入";
p.parentNode.insertBefore(newElem, p);
// 初期の位置
var x = 30, y = 30;
with(newElem.style){
// 大きさ
width = "100px";
height = "100px";
// 位置
position = "absolute";
top = y.toString() + "px";
left = x.toString() + "px";
// 背景の色
backgroundColor = "red";
// 透過度
opacity = "0.7";
}
// マウススクロールに対するイベント処理
addEventListener("DOMMouseScroll", function(e){
with(newElem.style){
top = (y + scrollY).toString() + "px";
left = (x + scrollY).toString() + "px";
}
}, false);
数値を文字列に変換
数値を文字列に変換するメソッドは toString 。
全てのオブジェクトは
toStringメソッドを持ち、オブジェクトが文字列値として表されるべきときや、文字列が期待される構文で参照されたときに自動的に呼び出されます。
toString - Number オブジェクトのメソッド によると、
指定された Number オブジェクトを表す 文字列を返します。