Wheel Events

An intro to explaining Wheel Events in JavaScript

Weston Everson 2025-22-1

To access the Wheel even you only need to have the onwheel event but mostly uses deltaX, deltaY, deltaZ, and deltaMode to check for the wheel event.

Examples Code 1:

<head>
    <style>

        body {
            min-height: 100vh;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        div {
            width: 100px;
            height: 100px;
            background: gray;
            padding: 5px;
        }

    </style>

</head>
<body>
    
    <div></div>

    <script>

        let scale = 1

        const el = document.querySelector("div");

        window.addEventListener("wheel", (event) => {
            
            event.preventDefault()

            scale += event.deltaY * -0.01;

            scale = Math.min(Math.max(0.125, scale), 4);
            
            el.style.transform = `scale(${scale})`;
        
        }, { passive: false});

    </script>

</body>
</html>

Within this code we have a couple of things.

  1. The div and body elements were made into a square and centered for easy use in this program
  2. Before invoking our event we made a variable of scale equal 1 as our starting position
  3. We made a const of el which will contain our div element
  4. once the event is listening for a wheel we preventDefault so that it doesn't do a default action
  5. we then set up an equation to check to see how big or small the div should get when the mouse wheel is scrolling in the Y position.

Example Code 2


<div id="image">
    <img src="../Image/sad-man.png" alt="sad man" width="10%">
</div>

<script>

    const imageCheck = document.getElementById("image");

    imageCheck.addEventListener("mouseover", (event) => {

        let scale = 1

        const el = document.querySelector("div");

        window.addEventListener("wheel", (event) => {
        
            event.preventDefault()

            scale += event.deltaX * -0.01;

            scale = Math.min(Math.max(0.125, scale), 4);
        
            el.style.transform = `scale(${scale})`;
    
        }, { passive: false});   

    })

</script>

Within this code, it has a couple of things to follow

  1. We have a div that links to an image for use
  2. We invoke a scale of 1
  3. We add a const of el to the div which has our image
  4. We use a preventDefault to stop if from reverting to its default action
  5. We use the equation to then have the image size increase or decrease depending on the movement of the mouse wheel in the X axis.

(Note this won't work on a mouse, this needs to be done on something like a mouse pad sense mouse wheels can only go in the Y axis)

Example Code 3


<body>

    <h1 id="text">Scroll to Resize Me!</h1>

    <script>
        let textElement = document.getElementById("text");
        let fontSize = 24;

        document.addEventListener("wheel", function(event) {
            if (event.deltaY < 0) {
                fontSize += 2;
            } else {
                fontSize -= 2;
            }

            // Prevent the font from getting too small or too large
            fontSize = Math.max(10, Math.min(100, fontSize));
            textElement.style.fontSize = fontSize + "px";
        });
    </script>

</body>

Within this code their are some things to understand

  1. We have and H1 with and ID of text that had a comment written
  2. We get the text ID then and a Font size to the text show we have a starting size to work with
  3. We then listen for the wheel event and if the mouse moves up it decreases the size and if it move down it increases the size
  4. Finally we add a max and minimum size the that text can be so that it doesn't become to small or large

Sources:

Developer Modzilla

w3schools

devcrud