joplin/ElectronClient/app/note-content.html

<style>
body {
	overflow: hidden;
}

#content {
	overflow-y: scroll;
	height: 100%;
}
</style>

<link rel="stylesheet" href="highlight/styles/atom-one-light.css">
<script src="highlight/highlight.pack.js"></script>

<div id="content"></div>

<script>
const { ipcRenderer } = require('electron');
const contentElement = document.getElementById('content');

ipcRenderer.on('setHtml', (event, html) => {
	contentElement.innerHTML = html;

	var codeElements = document.getElementsByClassName('code');
	for (var i = 0; i < codeElements.length; i++) {
		hljs.highlightBlock(codeElements[i]);
	}
});

let ignoreNextScroll = false;
ipcRenderer.on('setPercentScroll', (event, percent) => {
	ignoreNextScroll = true;
	contentElement.scrollTop = percent * maxScrollTop();
});

function elementMapCoordinates(element) {
	while (true) {
		if (!element) break;

		const m = element.getAttribute('data-map');
		if (m) return m.split(':');
		element = element.parentElement;
	}

	return null;
}

function maxScrollTop() {
	return Math.max(0, contentElement.scrollHeight - contentElement.clientHeight);
}

contentElement.addEventListener('scroll', function(e) {
	if (ignoreNextScroll) {
		ignoreNextScroll = false;
		return;
	}
	const m = maxScrollTop();
	ipcRenderer.sendToHost('percentScroll', m ? contentElement.scrollTop / m : 0);
});
</script>