<!DOCTYPE html>
<html>
<head>
<style>
#content {{
white-space: pre;
font-family: Arial, sans-serif;
overflow-y: scroll;
height: 500px;
}}
</style>
</head>
<body>
<div id="content" data-byte-offset="{position}">
{file_content}
</div>
<script>
const contentDiv = document.getElementById('content');
contentDiv.scrollTop = contentDiv.scrollHeight;
const loadMore = async () => {{
console.log(contentDiv.scrollTop)
if (contentDiv.scrollTop === 0) {{
const byteOffset = contentDiv.getAttribute('data-byte-offset') - {chunk_size};
contentDiv.setAttribute('data-byte-offset', byteOffset);
const response = await fetch(`/load-more?filename={filename}&position=${{byteOffset}}`);
const newText = await response.text();
contentDiv.innerHTML = newText + contentDiv.innerHTML;
const tempElement = document.createElement('div');
for (var i = 0; i < contentDiv.attributes.length; i++) {{
var attributeName = contentDiv.attributes[i].name;
var attributeValue = contentDiv.attributes[i].value;
tempElement.setAttribute(attributeName, attributeValue);
}}
tempElement.innerHTML = newText;
document.body.appendChild(tempElement);
console.log(tempElement.scrollHeight);
contentDiv.scrollTop = tempElement.scrollHeight;
document.body.removeChild(tempElement);
}}
}};
contentDiv.addEventListener('scroll', loadMore);
</script>
</body>
</html>