JavaScript でマウススクロールしたときのイベント処理

1. マウススクロールに応じたイベント処理

JavaScript で生成した DOM Element を、マウススクロールに合わせて移動させたい。

位置を固定する

要素を固定するには、CSS の position 属性を absolute にする。これにより、イベント処理をしなければ、マウススクロールしても固定した位置に留まる。

スクロール量を知る

JavaScript で、スクロール量を知るには、window オブジェクトの scrollY プロパティを利用する。scrollY は、

文書が垂直スクロールされているピクセル数を返します。

イベントの設定

エレメントにイベントを設定するには、

• element.addEventListener

を使う。このメソッドの使い方は、以下を参照。

• cf. 第6回 イベントハンドラから脱却しよう - DOMから始めるJavaScriptモダン・スクリプティング：ITpro」

マウスホイールの動きに対応するには、 Gecko-Specific DOM Events – MDC の  DOMMouseScroll を使う。

The DOMMouseScroll event 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イベントモデルへ

まずドキュメントツリーの上から下に向けてイベントが伝搬します。これをキャプチャー・フェーズと呼びます。

次に目的の要素にイベントが伝搬しますが，これをターゲット・フェーズと呼びます。ちなみに，この目的の要素のことを，ターゲットノードと呼びます。

しかし，ここで終わりではなく，さらに今度はターゲットノードからドキュメントツリーの上に向けてイベントが伝搬します。この段階をバブリング・フェーズと呼びます。

このように，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);

• cf. JavaScript で特定の要素の前に要素を挿入する

 

数値を文字列に変換

数値を文字列に変換するメソッドは toString 。

全てのオブジェクトは toString メソッドを持ち、オブジェクトが文字列値として表されるべきときや、文字列が期待される構文で参照されたときに自動的に呼び出されます。

toString - Number オブジェクトのメソッド によると、

指定された Number オブジェクトを表す 文字列を返します。