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

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

HTML DOMのWheelEvent deltaXプロパティは、ユーザーがマウスホイールなどで水平方向（左または右）にスクロールした量を符号付きの数値として返します。スクロール方向が垂直方向など水平以外の場合、このプロパティは0を返します。

戻り値の意味

  • 正の値：ユーザーが右方向にスクロールした
  • 負の値：ユーザーが左方向にスクロールした
  • 0：水平方向のスクロールが行われていない

なお、垂直方向のスクロール量を取得する場合は、同じWheelEventオブジェクトが持つdeltaYプロパティを使用します。

構文

構文は以下の通りです。

符号付きの数値を返します。

event.deltaX

それでは、HTML DOM WheelEvent deltaXプロパティの具体的な使用例を見ていきましょう。

サンプルコード

以下の例では、div要素上でのスクロール方向に応じて、要素の拡大・縮小・移動を切り替えています。

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM WheelEvent deltaX</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-deltaX</legend>
         <div id="content" onwheel="setControls(event)"></div>
         <input type="button" value="reset" onclick="resetCSS()">
         <div id="divDisplay">div要素の上でスクロールしてください</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要素にonwheelイベントハンドラを設定し、スクロールイベントが発生するたびにsetControls()関数が呼び出されます。

  • deltaY > 0（下方向スクロール）：要素を縮小（scale 0.5）し、背景色を水色に変更
  • deltaY < 0（上方向スクロール）：要素を拡大（scale 1.5）し、背景色を緑色に変更
  • deltaX > 0（右方向スクロール）：要素を右へ40px移動
  • deltaX < 0（左方向スクロール）：要素を左へ40px移動

また、「reset」ボタンをクリックすると、resetCSS()関数により要素のスタイルが初期状態に戻ります。

出力結果

div要素上で左方向にスクロールした場合：

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

div要素上で右方向にスクロールした場合：

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

リセットボタンをクリックした場合：

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

まとめ

WheelEvent deltaXプロパティを活用することで、ユーザーの水平スクロール操作を検出し、それに応じた動的なインタラクションを実装できます。画像ギャラリーの横スクロールやカルーセルUIの操作など、水平方向の操作が求められる場面で特に有用なプロパティです。


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

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

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

    HTML DOMのWheelEvent deltaYプロパティは、ユーザーが上方向または下方向のどちらにスクロールしているかに対応する符号付きの数値を返します。上下以外の方向（左右など）にスクロールした場合、このプロパティは0を返します。具体的には、下方向にスクロールした場合は正の値、上方向にスクロールした場合は負の値が返され、スクロール量が大きいほど値の絶対値も大きくなります。構文以下が構文です。符号付き数値を取得する場合：event.deltaY戻り値deltaYプロパティが返す値は以下のとおりです。正の値：下方向にスクロールした場合負の値：上方向にスクロールした場合0：左右方向など、上下