HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM WheelEvent deltaYプロパティの使い方と実例解説

HTML DOMのWheelEvent deltaYプロパティは、ユーザーが上方向または下方向のどちらにスクロールしているかに対応する符号付きの数値を返します。上下以外の方向（左右など）にスクロールした場合、このプロパティは0を返します。

具体的には、下方向にスクロールした場合は正の値、上方向にスクロールした場合は負の値が返され、スクロール量が大きいほど値の絶対値も大きくなります。

構文

以下が構文です。

符号付き数値を取得する場合：

event.deltaY

戻り値

deltaYプロパティが返す値は以下のとおりです。

  • 正の値：下方向にスクロールした場合
  • 負の値：上方向にスクロールした場合
  • 0：左右方向など、上下以外の方向にスクロールした場合

使用例

HTML DOM WheelEvent deltaYプロパティの具体的な使用例を見てみましょう。このサンプルでは、div要素上でのスクロール方向に応じて、要素の拡大・縮小や移動、色の変化を行います。

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM WheelEvent deltaY</title>
<style>
    * {
        padding: 2px;
        margin:5px;
    }
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    input[type="button"] {
        border-radius: 10px;
    }
    #content {
        width: 80px;
        height: 80px;
        margin: 20px 0 0 50px;
        background-color: #dc3545;
        transition: all 2s ease-in-out;
    }
</style>
</head>
<body>
    <form>
        <fieldset>
            <legend>HTML-DOM-WheelEvent-deltaY</legend>
            <div id="content" onwheel="setControls(event)"></div>
            <input type="button" value="reset" onclick="resetCSS()">
            <div id="divDisplay">Scroll over div element</div>
        </fieldset>
    </form>
    <script>
    var playDiv = document.getElementById("content");
    var count = 40;
    function setControls(event) {
        var valX = event.deltaX;
        var valY = event.deltaY;
            if(valY>0){
                playDiv.style.transform = "scale(0.5)";
                playDiv.style.backgroundColor = "rgba(0, 188, 212, 0.47)";
                playDiv.style.borderRadius = "50%";
            }
            else if(valY<0){
                playDiv.style.transform = "scale(1.5)";
                playDiv.style.backgroundColor = "rgba(0, 188, 0, 0.47)";
                playDiv.style.borderRadius = "0px";
            }
            else if(valX>0){
                count+=40;
                playDiv.style.transform = "translateX("+count+"px)";
            }
            else{
                count-=40;
                playDiv.style.transform = "translateX("+count+"px)";
            }
        }
        function resetCSS(){
            count = 40;
            var st = "width: 80px;height: 80px;margin: 20px 0 0 50px;background-color:
            #dc3545;transition: all 2s ease-in-out;";
            playDiv.style = st;
        }
    </script>
</body>
</html>

出力結果

div要素上で下方向にスクロールした場合、要素が縮小され、水色の円形に変化します。

HTML DOM WheelEvent deltaYプロパティの使い方と実例解説

div要素上で上方向にスクロールした場合、要素が拡大され、緑色の四角形に変化します。

HTML DOM WheelEvent deltaYプロパティの使い方と実例解説

リセットボタンをクリックすると、要素が初期状態に戻ります。

HTML DOM WheelEvent deltaYプロパティの使い方と実例解説

まとめ

deltaYプロパティは、ホイールイベントにおける垂直方向のスクロール量を判定する際に非常に便利です。類似のプロパティとして、水平方向のスクロール量を取得するdeltaX、奥行き方向のスクロール量を取得するdeltaZも用意されており、これらを組み合わせることで、多方向のスクロール操作に対応したインタラクティブなWebページを実装できます。

  1. HTML DOM offsetWidthプロパティの使い方をわかりやすく解説

    HTML DOM offsetWidthプロパティとは HTML DOMのoffsetWidthプロパティは、要素の実際の表示幅に対応する数値(ピクセル単位の整数)を返します。この幅にはパディング・ボーダー(境界線)・スクロールバーが含まれますが、マージンは含まれません。なお、offsetWidthは読み取り専用のプロパティのため、値を直接代入することはできません。 構文 HTMLElement.offsetWidth 要素が非表示(display: none など)の状態にある場合は、0 が返されます。 関連プロパティとの違い offsetWidth: パディング+ボーダー+スクロールバー

  2. HTML DOM WheelEvent deltaXプロパティとは？水平スクロール量の取得方法を解説

    HTML DOMのWheelEvent deltaXプロパティは、ユーザーがマウスホイールなどで水平方向（左または右）にスクロールした量を符号付きの数値として返します。スクロール方向が垂直方向など水平以外の場合、このプロパティは0を返します。戻り値の意味正の値：ユーザーが右方向にスクロールした負の値：ユーザーが左方向にスクロールした0：水平方向のスクロールが行われていないなお、垂直方向のスクロール量を取得する場合は、同じWheelEventオブジェクトが持つdeltaYプロパティを使用します。構文構文は以下の通りです。符号付きの数値を返します。event.deltaXそれでは、HTML DOM