| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <script src='jquery.min.js' type='text/javascript'></script> |
| |
| <title>Scroll Latency Test</title> |
| <style> |
| div.block { |
| width: 60px; |
| margin: auto; |
| height: 1024px; |
| } |
| div#block_a { |
| background-color: white; |
| } |
| div#block_b { |
| background-color: black; |
| } |
| body { |
| margin: 0; |
| } |
| #container { |
| cursor: pointer; |
| -webkit-user-select: none; |
| -moz-user-select: none; |
| -ms-user-select: none; |
| -webkit-tap-highlight-color: rgba(0,0,0,0); |
| } |
| </style> |
| <script> |
| function on_click(event) { |
| // Swap colors with each click |
| if (event.clientY < (window.innerHeight / 2.0)) { |
| $("#block_a").css("background-color", "black") |
| $("#block_b").css("background-color", "white") |
| } else { |
| $("#block_a").css("background-color", "white") |
| $("#block_b").css("background-color", "black") |
| } |
| // Scroll to location of click |
| $("body").animate({ |
| scrollTop: $("#block_a").height() - event.clientY |
| }, 0); |
| } |
| $(document).ready(function() { |
| $("body").click(on_click) |
| }) |
| </script> |
| </head> |
| |
| <body> |
| <div id="container"> |
| <div id="block_a" class="block"> </div> |
| <div id="block_b" class="block"> </div> |
| </div> |
| </body> |
| |
| </html> |
