Skip to content

Issue 6851 - Implement IOScrollbar for infinite scroll

Component Goal

This component is fully based on CSS variables and 100% customizable in terms of appearance and CSS. It can be used for various purposes, not only for the infinite scroll.

This component provides the minimal amount of features to be used for any sort of scrollable purpose, but it doesn't directly modify any related node: it triggers scroll and it exposes its properties such position, which is the current position of the slider in the scrollbar, size which is the amount of virtual pixels such scrollbar covers (basically the target element clientHeight), and it has a direction, which is either horizontal or vertical.

The scroll bar can be used for both horizontal and vertical purposes, and it's been already tested on Chrome, Firefox, and Edge.

The current smoke test leaves native scrollbars in for comparison with this implementation.

Please Note there are few DOM tricks/hacks to make it work everywhere so if you think something should change, please test such change before proposing it since it took quite some time to reach this cross browser, reliable state.

Thanks.

How to test

Once you have pulled this branch in, npm run $ test.io-scrollbar will prepare the smoke test page and after http-start (or npm start) you can reach http://127.0.0.1:8080/smoke/io-scrollbar.html and see a div with fixed size and an io-scrollbar bound to it.

Edited by Andrea Giammarchi

Merge request reports

Loading