Topic: Infinite scroll bug + proposed solution
*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:
- In our system you are a free user but Infinite scroll is a pro component.
- You added ticket in MDB Vue category but you are writing about Standard version (vanilla Javascript).
Best regards,
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Vue
- MDB Version: MDB5 3.1.1
- Device: Desktop
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: Yes