.scrollIntoView shifts page slightly to Left

Question

I installed a .scrollIntoView element and specified the location where the content must scroll to, which is . However, when I test it on the website, upon clicking on the button that triggers the scrollIntoView function, the function works great, it scrolls to the desired location and shows all the content that encompasses it, but the WHOLE page shifts slightly the LEFT.

NOTE: On Desktop it is not very noticeable but on mobile or tablet its quite obvious that roughly 10% of content on the left is cut out from the screen).

Any ideas on how to prevent the whole page shift LEFT?

.

  <div class="scrolltohere"></div>



<script>
function myFunction() {
  var elmnt = document.getElementsByClassName("scrolltohere");
  elmnt[0].scrollIntoView({behavior: "smooth", block: "start", inline: "start"}); 
}
</script>

Possible duplicate of: https://stackoverflow.com/questions/11039885/scrollintoview-causing-the-whole-page-to-move/11041376 — The GTMD, Dec 11 '19 at 17:51

score 0 · Answer 1 · answered Dec 11 '19 at 21:28

I got the answer, so basically the issues was that inline was set as "start", either removing it or changing it to "nearest" solved the page from shifting left.

change from this

  elmnt[0].scrollIntoView({behavior: "smooth", block: "start", inline: "start"});

to this

elmnt[0].scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});

.scrollIntoView shifts page slightly to Left

1 Answers1