<div class="item">Scroll with rAF</div>
<div class="item second">Scroll with _.throttle</div>
body {
   background: #444444;
   color: white;
   font: 20px/1.51 Helvetica, sans-serif;
   margin:0 auto;
   max-width:900px;
   padding:20px;
   min-height:1000vh;
}
.item {
  position:fixed;
  border:4px solid #9BFFBB;
  height:60px;
  width:100px;
  background:#333;
  padding:20px;
  top:20px;
}
.second {
  top:140px;
}
// Based on https://www.html5rocks.com/en/tutorials/speed/animations/#debouncing-scroll-events

var ticking = false,
    item = document.querySelectorAll('.item');

function update() {
  ticking = false; // reset the tick so we can capture the next onScroll
  item[0].style.width = window.scrollY + 100 + 'px';
}

function onScroll() {
  ticking = ticking || requestAnimationFrame(update);
}

window.addEventListener('scroll', onScroll, false);


/// THROTTLE

function throttled_version() {
  item[1].style.width = window.scrollY + 100 + 'px';
}

window.addEventListener('scroll', _.throttle(throttled_version, 16), false);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js

Packages

This Pen doesn't use any packages.