121 lines
2.6 KiB
HTML
121 lines
2.6 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<head>
|
||
|
|
<style>
|
||
|
|
#testInner {
|
||
|
|
position: absolute;
|
||
|
|
width: 600px;
|
||
|
|
top: 400px;
|
||
|
|
left: 200px;;
|
||
|
|
padding: 1em;
|
||
|
|
background: yellow;
|
||
|
|
box-shadow: 0 0 0.5em gray;
|
||
|
|
}
|
||
|
|
|
||
|
|
.marker {
|
||
|
|
position: fixed;
|
||
|
|
background: black;
|
||
|
|
color: white;
|
||
|
|
top: 200px;
|
||
|
|
padding: 1em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.spacer {
|
||
|
|
height: 200px;
|
||
|
|
}
|
||
|
|
|
||
|
|
button {
|
||
|
|
position: fixed;
|
||
|
|
top: 100px;
|
||
|
|
left: 200px;
|
||
|
|
padding: 2em;
|
||
|
|
font-size: 16px;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.trigger #testInner {
|
||
|
|
-webkit-transform: translateY(-200px);
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<button onclick="toggleRunning()">
|
||
|
|
CLICK ME to start / stop test
|
||
|
|
</button>
|
||
|
|
<div class="marker">Correct top position</div>
|
||
|
|
<div id="parent" class="trigger">
|
||
|
|
<div id="testInner">test element</div>
|
||
|
|
</div>
|
||
|
|
<p class="spacer">.</p>
|
||
|
|
<p class="spacer">.</p>
|
||
|
|
<p class="spacer">.</p>
|
||
|
|
<p class="spacer">.</p>
|
||
|
|
<p class="spacer">.</p>
|
||
|
|
<p class="spacer">.</p>
|
||
|
|
<p class="spacer" id="last">.</p>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
var INTERVAL_MS = 17;
|
||
|
|
var testElement = document.getElementById('testInner');
|
||
|
|
var testContainerElement = document.getElementById('parent');
|
||
|
|
|
||
|
|
var state = {};
|
||
|
|
state.triggerTranslationOnOrOff = false;
|
||
|
|
state.running = false;
|
||
|
|
state.intervalId = 0;
|
||
|
|
|
||
|
|
function updateState()
|
||
|
|
{
|
||
|
|
var translated = testContainerElement.classList.contains('trigger');
|
||
|
|
state.scrolled = !translated;
|
||
|
|
}
|
||
|
|
|
||
|
|
function toggleRunning()
|
||
|
|
{
|
||
|
|
state.running = !state.running;
|
||
|
|
if (state.running) {
|
||
|
|
updateState();
|
||
|
|
state.intervalId = setInterval(runSequence, INTERVAL_MS);
|
||
|
|
} else {
|
||
|
|
clearInterval(state.intervalId);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function doExpensiveContentUpdate()
|
||
|
|
{
|
||
|
|
var content = 'I should be stable at the correct position and not flicker above/below';
|
||
|
|
if (state.scrolled)
|
||
|
|
content += '.';
|
||
|
|
|
||
|
|
testElement.innerHTML = content;
|
||
|
|
|
||
|
|
var lastElement = document.getElementById('last');
|
||
|
|
var startTime = Date.now();
|
||
|
|
for (var i = 0; i < 1000; i++) {
|
||
|
|
lastElement.innerHTML = (lastElement.innerHTML + '.');
|
||
|
|
}
|
||
|
|
var domWriteTimeMs = Date.now() - startTime;
|
||
|
|
if (domWriteTimeMs > 2 * INTERVAL_MS)
|
||
|
|
lastElement.innerHTML = '';
|
||
|
|
}
|
||
|
|
|
||
|
|
function runSequence()
|
||
|
|
{
|
||
|
|
doExpensiveContentUpdate();
|
||
|
|
|
||
|
|
var newScrollTop;
|
||
|
|
if (state.scrolled) {
|
||
|
|
testContainerElement.classList.add('trigger');
|
||
|
|
newScrollTop = 0;
|
||
|
|
} else {
|
||
|
|
testContainerElement.classList.remove('trigger');
|
||
|
|
newScrollTop = 200;
|
||
|
|
}
|
||
|
|
|
||
|
|
document.body.scrollTop = newScrollTop;
|
||
|
|
state.scrolled = !state.scrolled;
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
|