0
288
ViewsScrolling to the center of a div when loading the web page
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:
2 answers
Answer question0
@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",
});
});
0
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)
})