Learn RxJS
Search…
Learn RxJS
Horizontal Scroll Indicator
This recipe demonstrates the creation of a horizontal scroll indicator.
Example Code
1
// RxJS v6+
2
import { fromEvent } from 'rxjs';
3
import { throttleTime, tap } from 'rxjs/operators';
4
​
5
const scrollIndication = document.getElementById('indication');
6
const getScrollWidth = () => {
7
const doc = document.documentElement;
8
// https://www.w3schools.com/howto/howto_js_scroll_indicator.asp
9
const winScroll = doc.scrollTop;
10
const height = doc.scrollHeight - doc.clientHeight;
11
​
12
return (winScroll / height) * 100;
13
};
14
const setScroll = _ => (scrollIndication.style.width = getScrollWidth() + '%');
15
​
16
fromEvent(document, 'scroll')
17
.pipe(throttleTime(20), tap(setScroll))
18
.subscribe();
Copied!
html
1
<style>
2
#indication {
3
position: fixed;
4
width: 5px;
5
height: 7px;
6
background-color: #ff3366;
7
left: 0px;
8
right: 0px;
9
top: 0px;
10
z-index: 2;
11
}
12
</style>
13
​
14
<div id="indication"> </div>
15
Scroll down!!!
16
<div class="app" style="position: absolute; margin-top: 3000px;">Boom!</div>
Copied!
Operators Used
Last modified 2yr ago
Copy link