加载网页时滚动到 div 的中心

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:

Answer 1

@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",
        });
      });

Answer 2

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)
})