title: Detect scrolling on pages without a scroll bar
body: <p>I have a webpage where the body has css</p>
  
  <pre><code>body {
    overflow-x: hidden;
    overflow-y: hidden;
  }
  </code></pre>
  
  <p>I do not want to show the scroll bar.</p>
  
  <p>I want to run some javascript when the user scrolls down, so I did this:</p>
  
  <pre><code>&lt;script&gt;
  document.addEventListener("scroll", function (e) {
      console.log("scrolling engage");
      if (e.detail &gt; 0) {
          // do things ...
      }
      return false;
  }, true);
  &lt;/script&gt;
  </code></pre>
  
  <p>I also tried setting <code>onscroll</code> to the function. The problem is that this event does not fire, I then found <a href="http://help.dottoro.com/ljurkcpe.php" rel="noreferrer">this page</a> which says the event only fires when there is a scroll bar, however I don't want a scroll bar.</p>
  
  <p>How do I detect the scroll wheel without showing the scroll bar? <a href="https://stackoverflow.com/a/18748082/1704411">I do not want to use jQuery</a>.</p>