Topic: Infinite scroll bug + proposed solution

tube-easy-clock free asked 1 year ago


*Expected behavior*Go to the documentation for the infinite-scroll directive. Go to the Basic Example. As you scroll down. New content should load until you get to the final winky face.

https://mdbootstrap.com/docs/standard/methods/infinite-scroll/

*Actual behavior*Scroll event is being handled, but condition is never triggered. This means additional content is not loaded. Specific to Windows Chrome and other derivatives. I assume this is due to float accuracy against a rounded number.

Resources (screenshots, code snippets etc.)

This is the existing code:

<br>const rect = el.getBoundingClientRect();<br>...<br>condition = rect.height + el.scrollTop >= el.scrollHeight;<br>

This is my patch based on mdn's documentation:

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight

<br>condition = Math.abs(el.scrollHeight - (el.clientHeight + el.scrollTop)) < 1<br>



Hi, thanks for your contribution. For beggining I would like to start from claryfing a few issues:

  1. In our system you are a free user but Infinite scroll is a pro component.
  2. You added ticket in MDB Vue category but you are writing about Standard version (vanilla Javascript).

Best regards,



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: MDB5 3.1.1
  • Device: Desktop
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: Yes
  • Provided link: Yes