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

HTML DOMWheelEventdeltaXプロパティ

HTML DOM WheelEvent deltaXプロパティは、ユーザーが左または右にスクロールしているかどうかに対応する符号付きの数値を返します。ユーザーが他の方向にスクロールしている場合、このプロパティは0を返します。

構文

以下は構文です-

署名された番号を返す

event.deltaX

HTML DOM WheelEvent deltaXの例を見てみましょう。 プロパティ-

例

<!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">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 DOMWheelEventdeltaXプロパティ

div要素を正しい方向にスクロールする-

HTML DOMWheelEventdeltaXプロパティ

リセットボタンをクリック-

HTML DOMWheelEventdeltaXプロパティ


  1. HTMLDOMoffsetWidthプロパティ

    HTML DOM offsetWidthプロパティは、パディング、境界線、スクロールバーを含む要素の幅に対応する数値を返しますが、マージンは返しません。 以下は構文です- 数値を返す HTMLelement.offsetWidth HTML DOM offsetWidthの例を見てみましょう プロパティ- 例 <!DOCTYPE html> <html> <head> <title>HTML DOM offsetHeight</title> <style>    form {   &n

  2. HTML DOMWheelEventdeltaYプロパティ

    HTML DOM WheelEvent deltaYプロパティは、ユーザーが上または下にスクロールしているかどうかに対応する符号付きの数値を返します。ユーザーが他の方向にスクロールしている場合、このプロパティは0を返します。 構文 以下は構文です- 署名された番号を返す event.deltaY 例 HTML DOMWheelEventdeltaYプロパティの例を見てみましょう- <!DOCTYPE html> <html> <head> <title>HTML DOM WheelEvent deltaY</title> <