After installing a .scrollIntoView element and specifying the location for the content to scroll to, I encountered an issue. When testing it on the website and clicking the button that triggers the scrollIntoView function, the function worked perfectly - scrolling to the desired location and displaying all the relevant content. However, the entire page shifted slightly to the left.
It wasn't very noticeable on desktop, but on mobile or tablet devices, approximately 10% of the content on the left was cut off from the screen. Any suggestions on how to prevent this leftward shift?
.
<div class="scrolltohere"></div>
<script>
function myFunction() {
var elmnt = document.getElementsByClassName("scrolltohere");
elmnt[0].scrollIntoView({behavior: "smooth", block: "start", inline: "start"});
}
</script>