tools/perf/page_sets/tough_scheduling_cases/sync_scroll_offset.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <meta name="viewport" content="user-scalable=no, width=device-width">
   5     <title> Async scroll test </title>
   6     <script>
   7      window.onload = function() {
   8        var fake = document.getElementById('fake-scroll');
   9
  10        var updateLocation = function() {
  11          var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
  12          fake.style.webkitTransform = 'translate3d(0, ' + (-scrollTop) + 'px, 0)';
  13          fake.style.transform = 'translate3d(0, ' + (-scrollTop) + 'px, 0)';
  14        }
  15        document.addEventListener('scroll', updateLocation);
  16      }
  17     </script>
  18     <style>
  19      * {
  20        margin:0;
  21        padding:0;
  22      }
  23
  24      div {
  25        width:50%;
  26        height:500px;
  27        margin-top:250px;
  28      }
  29
  30      #real-scroll {
  31        position:absolute;
  32        background-color:red;
  33      }
  34      #fake-scroll {
  35        position:fixed;
  36        left:50%;
  37        background-color:green;
  38      }
  39
  40      body {
  41        height:2500px;
  42      }
  43
  44     </style>
  45   </head>
  46   <body>
  47     <div id="real-scroll"></div>
  48     <div id="fake-scroll"></div>
  49   </body>
  50 </html>