Horizontal Scroll Indicator
This recipe demonstrates the creation of a horizontal scroll indicator.
// 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.asp
const 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>
Last modified 3yr ago