Can't dynamically change infiniteScrollUpDistance

[madmacc]

Expected Behavior

I assign a variable called "infiniteScrollUpDistance" to infiniteScrollUpDistance that has the value 6 then I change this to 1 in the .ts file as more items are loading into the list.
The value of infiniteScrollUpDistance should change from 6 to 1 and start loading items when the scrollbar is at 90% rather than 40%.

 <div #chatRoomContainer
      infinite-scroll
      [infiniteScrollContainer]="chatRoomContainer"
      [infiniteScrollUpDistance]="infiniteScrollUpDistance"
      [infiniteScrollThrottle]="10"
      (scrolled)="onScrollDown()"
      (scrolledUp)="onScrollUp()">

Actual Behavior

It keeps behaving as if it is 6 rather than 1 e.g. loading more items at 40% of the scroll height. Changing the value of the variable does not seem to do anything after the it gets the initial value.

Context

I want the scroll to be load early as soon as the user scrolls up when there are not many items in the list and then as the list becomes longer e.g 60 plus items I only want to load more items once the user is near the end of the list e.g. last 10%.
Basically I want to load when the user only has 10-20 items left to scroll up and see.
I am setting it at 6 to start to try and avoid this issue here: #355

Your Environment

• Version used: 9.0.0
• Browser Name and version: Chrome Version 85.0.4183.83 (Official Build) (64-bit)
• (Optional) Operating System and version (desktop or mobile): Windows 10

[orizens]

@madmacc can you reproduce the issue with a sandbox?

[madmacc]

@orizens I will try to do so when I have some time. It may be a couple of weeks away.