diff --git a/index.html b/index.html index 348456e..fd4e90f 100644 --- a/index.html +++ b/index.html @@ -87,6 +87,8 @@ -
+
+
+
diff --git a/main.js b/main.js index fe21852..c454322 100644 --- a/main.js +++ b/main.js @@ -1,20 +1,5 @@ -const viewportDimensions = { - x: 50000, - y: 50000, -}; - document.addEventListener("load", function () { const scrollableArea = document.getElementById("scrollable-area"); - const viewportWidth = window.innerWidth; - const viewportHeight = window.innerHeight; - - // Calculate the center position - const scrollToX = (viewportDimensions.x - viewportWidth) / 2; - const scrollToY = (viewportDimensions.y - viewportHeight) / 2; - - console.log(`Center is: ${scrollToX}, ${scrollToY}`); - // Set the initial scroll position - window.scrollTo(scrollToX, scrollToY); // Prevent default touch behavior to allow custom scrolling scrollableArea.addEventListener( @@ -41,4 +26,13 @@ document.addEventListener("load", function () { const walkY = (y - startY) * 2; window.scrollTo(scrollLeft - walkX, scrollTop - walkY); }); + + const centerPoint = document.getElementById("center-point"); + + // Scroll to the center point + centerPoint.scrollIntoView({ + behavior: "auto", + block: "center", + inline: "center", + }); }); diff --git a/style.css b/style.css index bfe10e6..1a0b33c 100644 --- a/style.css +++ b/style.css @@ -85,6 +85,15 @@ body { #scrollable-area { width: 50000px; height: 50000px; + position: relative; background-image: url("./img/forest-tile-512x512.jpg"); background-repeat: repeat; } + +#center-point { + position: absolute; + top: 50%; + left: 50%; + width: 1px; + height: 1px; +}