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.