improvements to scroll containers

2 files changed, 60 insertions, 25 deletions

diff --git a/index.html b/index.html
index cd49efa..01416d1 100644
--- a/index.html
+++ b/index.html
@@ -39,10 +39,6 @@
 				bottom: 0px;
 			}
 
-			*::-webkit-scrollbar-thumb {
-				visibility: visible;
-			}
-
 			.action {
 				width: 4em;
 				height: 4em;
@@ -62,6 +58,33 @@
 					brightness(97%) contrast(90%);
 			}
 
+			.fading-edge:after {
+				content: "";
+				position: absolute;
+				z-index: 1;
+				bottom: calc(10px + 2em - 1px);
+				left: 0;
+				pointer-events: none;
+				background-image: linear-gradient(to bottom, #e4edd700, #e4edd7ff);
+				width: calc(100% - 7px);
+				height: 10em;
+			}
+
+			* {
+				scrollbar-color: #71a429 #00000000;
+			}
+
+			::-webkit-scrollbar {
+				-webkit-appearance: none;
+				width: 7px;
+			}
+
+			::-webkit-scrollbar-thumb {
+				border-radius: 5px;
+				background-color: #71a429;
+				transform: translateZ(1);
+			}
+
 			@keyframes blink {
 				0% {
 					opacity: 100%;
diff --git a/init.js b/init.js
index 7c44cd5..21d6793 100644
--- a/init.js
+++ b/init.js
@@ -466,22 +466,15 @@ const modelSelectionUI = (canClose) => {
 	else modelSelectionUI();
 }
 
-const htmlContainer = (headline, htmlContent) => {
+const scrollContainer = (headline, htmlContent) => {
 	const [overlay, container] = openContainer(true, true);
+	container.style.height = "90%";
 
-	container.appendChild(document.createElement("h1")).innerText = headline;
-	container.style.maxHeight = "90%";
-	container.style.overflow = "scroll";
-	container.style.scrollbarColor = "#7fb82e #e4edd7";
-
-	const content = container.appendChild(document.createElement("div"));
-	content.style.width = "90%";
-	content.style.textAlign = "left";
-	content.innerHTML = htmlContent;
-
-	const close = content.appendChild(document.createElement("button"));
-	close.style.width = "100%";
-	close.style.margin = "2ex 0 2ex 0";
+	const close = container.appendChild(document.createElement("button"));
+	close.style.position = "absolute";
+	close.style.bottom = "5px";
+	close.style.left = "5px";
+	close.style.width = "calc(100% - 10px)";
 	close.classList.add("ui-button");
 	close.classList.add("button-overlay");
 	close.innerText = "Schließen";
@@ -489,11 +482,28 @@ const htmlContainer = (headline, htmlContent) => {
 		overlay.remove();
 	});
 
-	return [overlay, container, content, close];
+	const scroll = container.appendChild(document.createElement("div"));
+	scroll.style.overflowY = "scroll";
+	scroll.style.maxHeight = "calc(100% - 10px - 2em)";
+
+	const fade = scroll.appendChild(document.createElement("div"));
+	fade.classList.add("fading-edge");
+
+	const h1 = fade.appendChild(document.createElement("h1"));
+	h1.innerText = headline;
+
+	const content = fade.appendChild(document.createElement("div"));
+	content.style.width = "90%";
+	content.style.textAlign = "left";
+	content.style.marginBottom = "calc(4em + 2em + 5px)";
+	content.style.position = "relative";
+	content.innerHTML = htmlContent;
+
+	return [overlay, close];
 };
 
 document.getElementById("action-settings").addEventListener("click", () => {
-	const [overlay, container, content, buttonClose] = htmlContainer(
+	const [overlay, buttonClose] = scrollContainer(
 		"Einstellungen",
 		`
 		<h2>Fortschritt zurücksetzen</h2>
@@ -514,7 +524,7 @@ document.getElementById("action-settings").addEventListener("click", () => {
 		<p>Das Spiel kann entweder durch deinen Standort oder durch Berühren der Karte gesteuert werden. Falls dein Gerät keine Standortinformationen unterstützt, wird die Berührsteuerung automatisch eingeschaltet.</p>
 		<input type="checkbox" id="checkbox-touchcontrol">
 		<label for="checkbox-touchcontrol">Berührsteuerung verwenden</label>
-	`,
+		`,
 	);
 
 	const boxEnable3d = document.getElementById("checkbox-enable3d");
@@ -568,7 +578,7 @@ document.getElementById("action-info").addEventListener("click", () => {
 		)
 		.join("");
 
-	const [overlay, container, content] = htmlContainer(
+	scrollContainer(
 		"Informationen zum Spiel",
 		`
 		<h2> Entwicklung </h2>
@@ -620,7 +630,10 @@ Programm erhalten haben. Wenn nicht, siehe <a href="https://www.gnu.org/licenses
 		</ul>
 
 		<h3> Karten-Dienst </h3>
-		<a href="https://www.maptiler.com/copyright/">© MapTiler</a> <a href="https://www.openstreetmap.org/copyright">© OpenStreetMap contributors</a>`,
+		<a href="https://www.maptiler.com/copyright/">© MapTiler</a> <a href="https://www.openstreetmap.org/copyright">© OpenStreetMap contributors</a>
+
+		<br><br>
+		`,
 	);
 });
 
@@ -946,8 +959,7 @@ const timeline = ({ marker, updateHelp, body }) => {
 	inner.style.left = "4px";
 	inner.style.height = "calc(100% - 80px)";
 	inner.style.width = "calc(100% - 12px)";
-	inner.style.overflow = "auto";
-	inner.style.scrollbarColor = "#7fb82e #d9e9c6";
+	inner.style.overflowY = "scroll";
 	inner.style.direction = "rtl";
 
 	const pxPerYear = 5;