Issue
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:
Solution
@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",
});
});
Answered By - Donald Duck
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.