onScroll isn't firing any action (HTML)

Question

I'm trying (and failing) to use "onScroll" on a div. All others commands are working properly. I already tried use only the onScroll and gave me nothing too. Why it isn't working?

Code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Test</title>
    </head>
    <body>

        <div onClick="printSC()" onPointerMove="printPM()" onWheel="printWR()" onScroll="printSR()" style="height: 5000px">
        </div>
    </body>

    <script>
        function printSC() {
            console.log("click");
        }
        function printPM() {
            console.log("moved");
        }
        function printWR() {
            console.log("roll");
        }
        function printSR() {
            console.log("scroll");
        }
    </script>

</html>

I added a second code to show the "onClick" working properly on "body", but I neet it in a "div".

Code 2:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <title>Test</title>

</head>
 <body onScroll="printSR()">
  <div style="height: 5000px" ></div>
    
  <script>
      function printSR() {
          console.log("scroll");
      }
  </script>
 </body>
</html>

Sercan · Accepted Answer · 2022-01-20T18:15:36.340

If the <div> height is not 100%, you can use the wheel event instead of the scroll event. Currently, the onScroll event is not fired because the height style of the <div> element is not set. The height style is not applied when the <div> element's display property is inline. There are two ways to solve this problem.

Method-1

Similar to the scroll event, the wheel event can be used if the height of the <div> element does not exceed 100%:

function printSR() {
  console.log("scroll");
}

let onwheelContainer = document.getElementById('onwheelContainer');
onwheelContainer.addEventListener('wheel', printSR);

#onwheelContainer {
  display: block;
  height: 50px;
  border: 1px solid red;
}

<div id="onwheelContainer"></div>

Method-2

Applying a height style after applying the block style to the <div> element's display property:

.container {
  display: block;
  height: 5000px;
}

Method-3

Applying the height style to the <div> element using !important:

.container {
  height: 5000px !important;
}

Additionally, the <script></script> element must be written before the closing </body> tag. In the following application, the class style .container has been applied to the <div> element.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <title>Test</title>

  <style>
    /* [METHOD-1] The class style applied to the <div> element. */
    .container{
      display: block;
      height: 5000px;
      border: 1px solid blue;
    }
    
    /* [METHOD-2] Class style that can be applied to the <div> element. */
    .container2{
      height: 5000px !important;
    }
    
    #onwheelContainer {
      display: block;
      height: 50px;
      border: 1px solid red;
    }
  </style>
</head>
<body>
  <!-- The class style ".container" has been applied to the <div> element. -->
  <div class="container" onClick="printSC()" onPointerMove="printPM()" onWheel="printWR()" onScroll="printSR()"></div>
  
  <div id="onwheelContainer"></div>
    
  <!-- The <script></script> element is positioned before the closing tag </body>. -->
  <script>
      function printSC() {
          console.log("click");
      }
      function printPM() {
          console.log("moved");
      }
      function printWR() {
          console.log("roll");
      }
      function printSR() {
          console.log("scroll");
      }
      
      /* Similar to the scroll event, the wheel event can be used if the height of the <div> element does not exceed 100%. */
      let onwheelContainer = document.getElementById('onwheelContainer');
      
      onwheelContainer.addEventListener('wheel', printSR);
  </script>
  </body>
</html>

Thanks for reply. Sadly, it still not working for me. I tried to put the event on the body and worked, but I need it in a div. — Felipe, Jan 20 '22 at 17:48
The answer is simple; you cannot trigger the `onScroll` event on any `
` if the `height` of a page does not exceed `100%`! — Sercan, Jan 20 '22 at 17:57
Even if the height of the
is not more than 100% then the onScroll event on the
will not fire. — Sercan, Jan 20 '22 at 18:08
@Felipe I updated my answer. If the `
` height is not more than 100%, the `wheel` event can be used for the same function; I added this property to **Method-1**. — Sercan, Jan 20 '22 at 18:18
Again, thanks for reply. If I understood correctly, the wheel event will replace the "oneWheel", not the "onScroll". The onWheel was OK, but it's fired only when the mouse wheel is used. I need to get all commands that the user uses to scroll page down (wheel, scroll the sidebar, page down, etc). — Felipe, Jan 20 '22 at 18:32
The scroll event of the page you are talking about. [Related](https://stackoverflow.com/a/45719399/15032688) — Sercan, Jan 20 '22 at 18:44
You're talking about height, but what about horizontal scrolling? — Rodrigo, Jan 12 '23 at 22:20

onScroll isn't firing any action (HTML)

1 Answers1

Method-1

Method-2

Method-3