The `scroll` event doesn't fire when I scroll down. Not sure what I am doing wrong here.

Below is my code:

```
<style>
  #scroll {
    max-height: 100px;
    overflow-y: auto;
    width: 647px;
    margin: auto;
  }
</style>
<body>
  <div id='scroll'>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
  </div>
  <script>
    $(document).on("scroll", "#scroll", function() {
      console.log("hi");
    });
  </script>
</body>

```