Reactiva Scroll

by xxjcaxx

HTML

<script src="https://unpkg.com/rxjs@^7/dist/bundles/rxjs.umd.min.js"></script>

<div id="container">

</div>

CSS

#container {
  height: 1000px;
  border: 1px solid #111;
}

JavaScript

const { fromEvent,throttleTime, tap } = rxjs;

document.addEventListener('load',()=>{

  const container = document.querySelector("#container");

 const scrollObservable = fromEvent(document, "scroll").pipe(
 tap(a => console.log(a)),
  throttleTime(100));
  // Necessitem fer throttle per no tindre massa events seguits i saturar la CPU

  scrollObservable.subscribe((e) => {
  
    const height = document.documentElement.scrollHeight;
    const hue = (window.scrollY / height) * 360;
    container.style.backgroundColor = `hsl(${hue}, 50%, 50%)`;
    console.log(hue, height, window.pageYOffset, window.scrollY);
});

});