HTML onscroll Event Attribute

Description

The event attribute onscroll allows you to specify whether the script fires while the element's scroll bar scrolls.

Syntax

<element onscroll="script">

Values

  • scriptThe name of the script to use when the event has been triggered.

Example

<!DOCTYPE html> 
  <html> 
    <head>
      <title>onscroll event</title> 
      <style> 
      div {
        width: 200px;
        height: 150px;
        border: 1px solid;
        overflow: scroll;
      }
      </style> 
    </head> 
    <body>
    <p>To demonstrate the onscroll event attribute, scroll the scroll bar of the following item:</p>	
    <div id="scrl" onscroll="scrl()">The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
    </div> 
<script> 
function scrl () {
  document.getElementById("scrl").style.backgroundColor="orange"; 
} 
</script> 
  </body> 
</html>

Supported Tags

<address>, <blockquote>, <body>, <caption>, <center>, <dd>, <dir>, <div>, <dl>, <dt>, <fieldset>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <html>, <li>, <menu>, <object>, <ol>, <p>, <pre>, <select>, <tbody>, <textarea>, <tfoot>, <thead> and <ul>

Desktop
Explorer Edge Chrome Firefox Opera Safari
XYesYesYesXX
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
YesYesYesXXX