sync_scroll_offset.html | Explore in Territory

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="user-scalable=no, width=device-width">
    <title> Async scroll test </title>
    <script>
     window.onload = function() {
       var fake = document.getElementById('fake-scroll');

       var updateLocation = function() {
         var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
         fake.style.webkitTransform = 'translate3d(0, ' + (-scrollTop) + 'px, 0)';
         fake.style.transform = 'translate3d(0, ' + (-scrollTop) + 'px, 0)';
       }
       document.addEventListener('scroll', updateLocation);
     }
    </script>
    <style>
     * {
       margin:0;
       padding:0;
     }

     div {
       width:50%;
       height:500px;
       margin-top:250px;
     }

     #real-scroll {
       position:absolute;
       background-color:red;
     }
     #fake-scroll {
       position:fixed;
       left:50%;
       background-color:green;
     }

     body {
       height:2500px;
     }

    </style>
  </head>
  <body>
    <div id="real-scroll"></div>
    <div id="fake-scroll"></div>
  </body>
</html>
chromium/tools/perf/page_sets/tough_scheduling_cases/sync_scroll_offset.html
