index.html

<style>
  .scroller {
  overflow: auto;
  height: 100px;
  width: 100px;
}

.rightToLeft {
  direction: rtl;
}

.bottomToTop {
  writing-mode: vertical-rl;
  direction: rtl;  
}

.horizontalContents {
  height: 100%;
  width: 1000px;
}


.verticalContents {
  height: 1000px;
  width: 100%;
}
</style>

<div>Horizontal scrollers:</div>

<div id="scroller1" class="scroller">
  <div class="horizontalContents"></div>
</div>
<div id="scroller1Output">Current time:</div>

<div id="scroller2" class="scroller rightToLeft">
  <div class="horizontalContents"></div>
</div>
<div id="scroller2Output">Current time:</div>

<div style="margin-top: 2em">Vertical scrollers</div>

<div id="scroller3" class="scroller">
  <div class="verticalContents"></div>
</div>
<div id="scroller3Output">Current time:</div>

<div style="margin-bottom: 1em"></div>

<div id="scroller4" class="scroller bottomToTop">
  <div class="verticalContents"></div>
</div>
<div id="scroller4Output">Current time:</div>

<script>
const horizontalScroller = new ScrollTimeline({ scrollSource: scroller1, timeRange: 1000, orientation: 'horizontal' });
const horizontalScrollerRightToLeft = new ScrollTimeline({ scrollSource: scroller2, timeRange: 1000, orientation: 'horizontal' });
const verticalScroller = new ScrollTimeline({ scrollSource: scroller3, timeRange: 1000, orientation: 'vertical' });
const verticalScrollerBottomToTop = new ScrollTimeline({ scrollSource: scroller4, timeRange: 1000, orientation: 'vertical' });

scroller1.addEventListener('scroll', function() {
  scroller1Output.innerText = 'Current time: ' + Math.round(horizontalScroller.currentTime);
});

scroller2.addEventListener('scroll', function() {
  scroller2Output.innerText = 'Current time: ' + Math.round(horizontalScrollerRightToLeft.currentTime);
});

scroller3.addEventListener('scroll', function() {
  scroller3Output.innerText = 'Current time: ' + Math.round(verticalScroller.currentTime);
});

scroller4.addEventListener('scroll', function() {
  scroller4Output.innerText = 'Current time: ' + Math.round(verticalScrollerBottomToTop.currentTime);
});
</script>