Horizontal Scroll Indicator

Search…

By adamlubek​
This recipe demonstrates the creation of a horizontal scroll indicator.
​​
​​
Example Code
( StackBlitz )
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">&nbsp;</div>
15
Scroll down!!!
16
<div class="app" style="position: absolute; margin-top: 3000px;">Boom!</div>
Copied!
Operators Used
​fromEvent​
​tap​
​throttleTime​

Game Loop

Http Polling

Last modified 1yr ago

Copy link

Contents

Example Code

html

Operators Used