Mir ist unter Linux aufgefallen das ich gar nicht den Auto-Scroll von Windows habe in zb. Google Chrome wenn man auf das Mauspad klickt, nutze ich gerne und dachte mir als Challenge ohne Chat Gpt dass ich mal schnell probieren könnte ein eigenes zu programmieren.
Ich weiß da gibt es fertige Software und Extension's, die laufen ohne Probleme und Ressourcen sparender wahrscheinlich.
Hab das erst in einer Html Datei (Extension in "") gemacht zum testen dann in anderen Websites den JS Code in eine Konsole eingefügt und es funktioniert eigentlich ganz gut.
Das Problem ist das ich nicht verstehe wieso er nicht hier funktioniert https://www.tennon.io/ , mir fällt beim inspizieren nichts auf und es scheint mit Next JS umgesetzt zu sein.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Auto Scroll Extension</title>
<style>
html {
min-width: 100%;
}
</style>
</head>
<body>
<script>
/* Render Dummy Content, cursor change wont work with min-height */
for (let i = 0; i < 1000; i++) {
document.body.innerHTML += "Lorem Ipsum ";
}
const scrollSpeed_Up = -1;
const scrollSpeed_Down = 1;
const middlehalf = window.innerHeight / 2;
let AutoScroll_Interval; /* Global acess */
let isScrolling = false;
let isScrollingUp = false; /* Default Scrolling Down, Prevent Errors */
const ToggleScrolling = Enable => {
if (Enable) {
console.log("Auto Scroll Active");
document.body.style.cursor = "all-scroll";
AutoScroll_Interval = setInterval(AutoScroll, 1);
isScrolling = true; /* Prevent Multiple Interval's */
} else if (!Enable && isScrolling) {
/* Stop Interval , Reset Cursor and Variables */
console.log("Auto Scroll Stopped");
document.body.style.cursor = "auto";
clearInterval(AutoScroll_Interval);
isScrolling = false;
}
}
const AutoScroll = () => {
/* Get Current Vertical Scroll Position : console.log(window.scrollY); */
isScrollingUp ? window.scrollBy(0, scrollSpeed_Up) : window.scrollBy(0, scrollSpeed_Down);
}
window.addEventListener("mousemove", e => {
e.clientY > middlehalf ? isScrollingUp = false : isScrollingUp = true;
});
/* Check if Scroll Button is Pressed */
window.addEventListener("mousedown", e => {
e.button === 1 && !isScrolling ? ToggleScrolling(true) : ToggleScrolling(false);
});
/* ############## IGNORE ##############
Check if Client has reached Bottom
const scrollableHeight = document.documentElement.scrollHeight - window.innerHeight;
if (window.scrollY >= scrollableHeight) {
// Reached Bottom Code ...
} else {
// Code ...
}
*/
</script>
</body>
</html>