onScroll isn't firing any action (HTML)

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>