Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

HTML Basic

HTML Reference

HTML onwheel Attribute

Posted in HTML Tutorial
Updated on Sep 22, 2024
By Mari Selvan
👁️ 63 - Views
⏳ 4 mins
💬 1 Comment
HTML onwheel Attribute

Photo Credit to CodeToFun

🙋 Introduction

The onwheel attribute is a powerful feature in HTML that allows developers to define JavaScript code that will be executed when the user rotates the mouse wheel over a specified element.

This attribute is commonly used to add dynamic behavior to web pages, providing a responsive and interactive user experience.

🎯 Purpose of onwheel

The primary purpose of the onwheel attribute is to enable developers to capture and respond to mouse wheel events.

By attaching this attribute to an HTML element, you can execute custom JavaScript code when the user scrolls using the mouse wheel, allowing for a wide range of interactive possibilities.

💎 Values

The onwheel attribute can be assigned values that represent JavaScript code to be executed when the wheel event occurs.

Common values include function calls and inline JavaScript code. Here's a basic example:

onwheel.html
Copied
Copy To Clipboard
<div onwheel="myFunction(event)">Scroll over me!</div>

🧠 How it Works

In this example, the onwheel attribute is set to call the myFunction JavaScript function when the user scrolls over the specified <div> element.

📄 Example

Let's explore a simple example of using the onwheel attribute to change the font size of a text element dynamically:

onwheel.html
Copied
Copy To Clipboard
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>onwheel Example</title>
  <style>
    #scrollText {
      font-size: 16px;
      transition: font-size 0.5s ease;
    }
  </style>
</head>
<body>

  <p id="scrollText" onwheel="changeFontSize(event)">Scroll to change font size!</p>

  <script>
    function changeFontSize(event) {
      const scrollText = document.getElementById("scrollText");
      event.deltaY > 0 ? scrollText.style.fontSize = "18px" : scrollText.style.fontSize = "14px";
    }
  </script>

</body>
</html>

🧠 How it Works

In this example, the onwheel attribute is applied to a <p> element, triggering the changeFontSize JavaScript function when the user scrolls. The font size of the text is dynamically adjusted based on the direction of the scroll.

🔄 Dynamic Values with JavaScript

You can also dynamically set the onwheel attribute using JavaScript. This allows you to adapt event handling based on changing conditions or user interactions. Here's a brief example:

onwheel.html
Copied
Copy To Clipboard
<script>
  // Dynamically set onwheel event for an element
  document.getElementById("dynamicElement").onwheel = function(event) {
    // Your dynamic event handling code here
    console.log("Mouse wheel event detected!");
  };
</script>

🧠 How it Works

In this script, the onwheel attribute is dynamically set for an element with the id dynamicElement. Adjust the event handling code as needed for your specific requirements.

🏆 Best Practices

  • Use the onwheel attribute judiciously to enhance user interactions without overwhelming the user experience.
  • Consider accessibility aspects when implementing wheel event handling, as not all users interact with a webpage using a mouse.
  • Test your code across different browsers to ensure consistent behavior.

🎉 Conclusion

The onwheel attribute is a valuable tool for creating dynamic and responsive web pages by allowing developers to capture and respond to mouse wheel events.

By leveraging this attribute, you can enhance the interactivity of your web content and provide a more engaging user experience.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Mari Selvan
Mari Selvan
8 months ago

If you have any doubts regarding this article (HTML onwheel Attribute), please comment here. I will help you immediately.

We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy