By adamlubek​
This recipe demonstrates the creation of a horizontal scroll indicator.
​​​​
( StackBlitz )
// RxJS v6+import { fromEvent } from 'rxjs';import { throttleTime, tap } from 'rxjs/operators';​const scrollIndication = document.getElementById('indication');const getScrollWidth = () => {const doc = document.documentElement;// https://www.w3schools.com/howto/howto_js_scroll_indicator.aspconst winScroll = doc.scrollTop;const height = doc.scrollHeight - doc.clientHeight;​return (winScroll / height) * 100;};const setScroll = _ => (scrollIndication.style.width = getScrollWidth() + '%');​fromEvent(document, 'scroll').pipe(throttleTime(20), tap(setScroll)).subscribe();
<style>#indication {position: fixed;width: 5px;height: 7px;background-color: #ff3366;left: 0px;right: 0px;top: 0px;z-index: 2;}</style>​<div id="indication"> </div>Scroll down!!!<div class="app" style="position: absolute; margin-top: 3000px;">Boom!</div>
​fromEvent​
​tap​
​throttleTime​