Scrolling to the center of a div when loading the web page

Question

I would like to find out how to achieve centered alignment when loading a page. I have a div which is 4000x2000 pixels and a text which is centered within this div. Now when reloading I want to scroll to the X so that the X is in the middle. I have already found something on the internet, unfortunately it does not work for me. What am I doing wrong?

let testDiv = document.getElementById("containerTest");
    document.addEventListener("DOMContentLoaded", function() {
        testDiv.scrollTop = testDiv.scrollHeight/2;
        testDiv.scrollLeft = testDiv.scrollWidth/2;
    })

#containerTest{
            width: 4000px;
            height: 2000px;
            background-color: orange;
        }
        .inner-div{
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            font-size: 50px;
            position: relative;
            justify-content: center;
            text-align: center;
            color: red;
        }

<div id="containerTest">
    <div class="inner-div">X</div>
</div>

This is how it should look after loading:

score 1 · Accepted Answer · answered Jul 10 '22 at 20:20

@Buggies made a good point about browsers auto scroll after refresh

If you want a more robust solution to scroll to the center, try using scrollIntoView which works even if there's content above/to the left of the container

      window.addEventListener("load", function () {
        let testDiv = document.getElementById("containerTest");
        testDiv.scrollIntoView({
          behavior: "auto",
          block: "center",
          inline: "center",
        });
      });

score 0 · Answer 2 · answered Jul 10 '22 at 20:00

The first problem is auto scroll from browser, info and solution you can find here: Disable brower's auto scroll after a page refresh?

The second problem is that you are scrolling with containerTest but it is not scrollable. You want to scroll with body/window

example:

window.addEventListener('load', function () {
    let testDiv = document.querySelector('#containerTest')
    window.scroll(testDiv.scrollWidth / 2, testDiv.scrollHeight / 2)
})

Scrolling to the center of a div when loading the web page

2 Answers2