learningequality
Library page - When scrolling to the bottom the page glitches
Observed behavior
When scrolling through libraries with a small number of folders, the page glitches continuously once you reach the bottom. This issue stops when scrolling back up. The problem does not occur on pages with a large number of folders, where scrolling is required to reach the bottom.
Video:
https://drive.google.com/file/d/1qxNibTRRREAzZLNeRZcGfCniVfMfbPD9/view?usp=sharing
Expected behavior
When reaching the bottom of a library page, the page should not exhibit any visual glitches, and scrolling should function smoothly without issues.
User-facing consequences
Users experience a distracting visual glitch when navigating libraries with fewer folders, affecting the overall user experience.
Steps to reproduce
- Install the latest develop build.
- Navigate to Learn > Library and open a library page with a small number of folders.
- Scroll to the bottom of the page to observe the glitch.
Context
- Kolibri version: 18
- Operating system: Windows 11, Ubuntu
- Browser: All browsers
Hi @DuarteRamires - thank you for opening this issue and for your interest in contributing. There have been several related issues filed over time (and several times that we have thought we "fixed" this problem, which has come back to haunt me) and you'll find some context here: https://github.com/learningequality/kolibri/issues/10663 (which also has a duplicate issue linked).
If you'd like to take this up, you can do so, but please share here your planned approach first as a comment before getting started with coding/opening a PR. Feel free to ask any follow up questions after reading the linked issue thread.
Hi @manuaishika, I will refer you to @marcellamaki's comment above.
This issue may not be very 'friendly' - current implementation is troublesome. I'd ask you to study in detail the linked issues and understand well what's the expected sticky header and scrollbar user experience, and have a good sense of how the current code is structured. After that, comment here again and if you feel clarity around it, we can assign.
I think at some point we agreed to replace the JS script with CSS position: sticky. So after you have understood the current code, next step would be to experiment with such a refactor and prepare a proof of concept. In Kolibri, we need to support older browsers and we may need to wait before we can merge this solution, however seeing how it works and having it ready would be valuable.
