Post
Ask Question

Power of Typescript Scroll Events

The onscroll event in JavaScript is a powerful tool that gets triggered when a scrollbar is used for an element. This event is particularly useful for creating dynamic and interactive web experiences, allowing developers to respond to user interactions with scrolling. In this exploration, we'll dive into the intricacies of the onscroll event, examining different approaches in both traditional JavaScript (ES8) and the enhanced TypeScript language.

Understanding the Basics: Syntax and Application

Before delving into practical examples, let's grasp the basic syntax for using the onscroll event in HTML and JavaScript.

<element onscroll="fun()">

JavaScript Syntax

object.onscroll = function() { myScript };

JavaScript Syntax with addEventListener

object.addEventListener("scroll", myScript);

These syntax snippets illustrate how to employ the onscroll event either directly in HTML or through JavaScript. The latter provides greater flexibility and is often preferred for more complex applications.

Example 1. Using onscroll Attribute in HTML

In this example, we employ the onscroll attribute directly in HTML. A paragraph element with the ID "para" changes its color and background when scrolling.

<!-- HTML -->
<!DOCTYPE html>
<html>
<head>
<style>
  #para {
    width: 250px;
    height: 150px;
    overflow: scroll;
    border: 1px solid red;
    font-size: 25px;
  }
</style>
</head>
<body>
  <h1>Hello world :):)</h1>
  <h2>Scroll the bordered text to see the effect.</h2>
  <p>This is an example of using the <b>onscroll</b> attribute.</p>
  <p id="para" onscroll="fun()">Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science-related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.</p>

  <script>
    function fun() {
      document.getElementById("para").style.color = "red";
      document.getElementById("para").style.background = "lightgreen";
    }
  </script>
</body>
</html>

After scrolling the bordered text, the color and background of the paragraph will change, showcasing the application of the onscroll attribute.

Example 2. Using JavaScript's onscroll Event

In this example, we utilize JavaScript to handle the onscroll event. The same color and background change is applied when scrolling the paragraph.

<!-- HTML -->
<!DOCTYPE html>
<html>
<head>
<style>
  #para {
    width: 250px;
    height: 150px;
    overflow: scroll;
    border: 1px solid red;
    font-size: 25px;
  }
</style>
</head>
<body>
  <h1>Hello world :):)</h1>
  <h2>Scroll the bordered text to see the effect.</h2>
  <p>This is an example of using JavaScript's <b>onscroll</b> event.</p>
  <p id="para">Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science-related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.</p>
  <p id="para1"></p>

  <script>
    document.getElementById("para").onscroll = function() { fun() };

    function fun() {
      document.getElementById("para").style.color = "red";
      document.getElementById("para").style.background = "lightgreen";
      document.getElementById("para1").innerHTML = "You are scrolling the content";
    }
  </script>
</body>
</html>

Here, the onscroll event is handled using JavaScript. The color and background of the paragraph change, and a message is displayed in another paragraph (para1) to indicate scrolling.

Example 3. Using addEventListener() Method

In this example, we leverage the addEventListener() method for handling the scroll event. The same color and background change is applied when scrolling the paragraph.

<!-- HTML -->
<!DOCTYPE html>
<html>
<head>
<style>
  #para {
    width: 250px;
    height: 150px;
    overflow: scroll;
    border: 1px solid red;
    font-size: 25px;
  }
</style>
</head>
<body>
  <h1>Hello world :):)</h1>
  <h2>Scroll the bordered text to see the effect.</h2>
  <p id="para">Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science-related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.</p>
  <p id="para1"></p>

  <script>
    document.getElementById("para").addEventListener("scroll", fun);

    function fun() {
      document.getElementById("para").style.color = "red";
      document.getElementById("para").style.background = "lightgreen";
      document.getElementById("para1").innerHTML = "You are scrolling the content";
    }
  </script>
</body>
</html>

Here, the addEventListener() method is employed for handling the scroll event, resulting in the same visual effects.


Similar Articles