<!DOCTYPE html> <html> <head> </head> <script> function setWindowRect(win, clientRect, fromWindow) { if (win) { var desktopLeft = fromWindow.screenLeft - fromWindow.screen.availLeft; var desktopTop = fromWindow.screenTop - fromWindow.screen.availTop; win.moveTo(clientRect.left + desktopLeft, clientRect.top + desktopTop); win.resizeTo(clientRect.width, clientRect.height); } } function createEqual(div, fromWindow) { win = window.open("about:blank", "", "location=no, resizable=no, scrollbars=no, status=no, titlebar=no, toolbar=no, left=0, top=0, width=1, height=1"); win.document.write("<style>body { margin: 0 }</style><body></body>"); win.document.getElementsByTagName('body')[0].innerHTML = div.outerHTML; setWindowRect(win, div.getClientRects()[0], fromWindow); return win; } var window1; var window2; function runTests() { var div1 = document.getElementsByTagName('div')[1]; var div2 = document.getElementsByTagName('div')[2]; window1 = createEqual(div1, window); window2 = createEqual(div2, window); window.onscroll = function() { setWindowRect(window1, div1.getClientRects()[0], window); setWindowRect(window2, div2.getClientRects()[0], window); } start = Date.now(); sign = 1; function step(timestamp) { var progress = timestamp - start; var before = document.body.scrollTop; window.scrollBy(0, 10 * sign); if (before == document.body.scrollTop) { sign = sign * -1; } requestAnimationFrame(step); } scrollTo(0, 0); requestAnimationFrame(step); } function endTests() { window1.close(); window2.close(); } </script> <body onload="runTests()" onunload="endTests()"> <div style="height: 1000px"></div> <div style="background-color: red; width: 400px; height: 100px;"></div> <br> <div style="background-color: blue; width: 200px; height: 200px; float: right"></div> <div style="height: 1000px"></div> </body> </html>