Improve autoscrolling

This commit is contained in:
2024-12-30 17:13:41 +01:00
parent ff8d9c80e6
commit 246d9aeed7
3 changed files with 33 additions and 6 deletions

View File

@ -3,18 +3,40 @@ const song = document.querySelector("iframe.song").contentWindow;
// Autoscroll
var scroll;
var scrollTimeout = 60;
const minTimeout = 10;
const maxTimeout = 120;
const scrollIncrement = 20;
function pageScroll() {
song.scrollBy(0, 1);
scroll = setTimeout(pageScroll, 80);
scroll = setTimeout(pageScroll, scrollTimeout);
}
document.querySelector("#autoscroll").addEventListener("click", function() {
if (this.classList.contains("active")) {
function updateScrollSpeed() {
if (controls.querySelector("#autoscroll").classList.contains("active")) {
clearTimeout(scroll);
} else {
pageScroll();
scroll = setTimeout(pageScroll, scrollTimeout);
}
}
controls.querySelector("#autoscroll-increase").addEventListener("click", () => {
scrollTimeout = Math.max(minTimeout, scrollTimeout - scrollIncrement);
updateScrollSpeed();
});
controls.querySelector("#autoscroll-decrease").addEventListener("click", () => {
scrollTimeout = Math.min(maxTimeout, scrollTimeout + scrollIncrement);
updateScrollSpeed();
});
controls.querySelector("#autoscroll").addEventListener("click", function() {
this.classList.toggle("active");
if (this.classList.contains("active")) {
pageScroll();
} else {
clearTimeout(scroll);
}
});
// Scaling
@ -31,5 +53,6 @@ controls.querySelector("#font-size-increase").addEventListener("click", () => pa
controls.querySelector("#font-size-decrease").addEventListener("click", () => pageScale(-0.1));
controls.querySelector("#font-size-reset").addEventListener("click", () => pageScale(0));
// Display the controls on JS-enabled browsers
window.addEventListener("load", () => controls.classList.remove = "hidden");