how to use infiniteScrollDistance? scrolled event fires no matter what value

[henryyue2010]

I followed the example.

<div
      class="search-results"
      infiniteScroll
      [infiniteScrollDistance]="2"
      [infiniteScrollThrottle]="50"
      (scrolled)="onScroll()"
    ></div>

but the scrolled event fires right after the page scrolls, no matter the value of infiniteScrollDistance. How to make it work? Thank you very much in advance for your help.

Expected Behavior

Scrolled to the expected position, then the scrolled event fires.

Actual Behavior

the scrolled event fires right after the page scrolls.

Possible Solution

Steps To Reproduce / Demo (if applicable)

[ ] Please share a stackblitz or plunkr demo reproducing this issue

Context

Your Environment

• [ ] Version used:
• [ ] Browser Name and version:
• [ ] (Optional) Operating System and version (desktop or mobile):
• [ ] (Optional) Link to your project:

[orizens]

infiniteScrollDistance is sensitive - try out the demo.