logging the scrolled position smoother

July 15, 2017

With window.requestAnimationFrame the refreshing frequency will be 60fps, with less GPU usage even.

scrolling example

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    html {
      height: 2000px;
    }
  </style>
</head>

<body>
  lol
</body>
<script>
  var last_known_scroll_position = 0;
  var ticking = false;

  function doSomething(scroll_pos) {
    console.log(
      last_known_scroll_position
    )
  }

  window.addEventListener('scroll', function(e) {
    last_known_scroll_position = window.scrollY;
    if (!ticking) {
      window.requestAnimationFrame(function() {
        doSomething(last_known_scroll_position);
        ticking = false;
      });
    }
    ticking = true;
  });
</script>

</html>

Tagged withHTML, javascript

Questions, Comments, Suggestions? Open an Issue