scrollIntoView（）向上移动整个页面布局

Question

The whole page layout moves up when we use scrollIntoView(true). For my requirement I need to use true parameter. I need to avoid this move. I posted a working copy of this code in https://jsfiddle.net/7v4t31p0/ Thank you in advance.

 .body { display: flex; width: 100%; border: 1px solid gray; } .left { flex: 0 0 200px; } .right { flex: 1 1 auto; border: 1px solid green; } .details { display: flex; width: 100%; } .links { display: flex; flex-direction: column; } .content { max-height: 100px; overflow-y: auto; flex: 1 1 auto; } .content div { min-height: 100px; } 

 <div> <div> Header </div> <div class="body"> <div class="left"> Left panel </div> <div class="right"> <div class="details"> <div class="links"> <button id='btn1'>link 1</button> <button id='btn2'>link 2</button> <button id='btn3'>link 3</button> </div> <div class="content"> <div id="content1"> Content 1</div> <div id="content2"> Content 2</div> <div id="content3"> Content 3</div> </div> </div> </div> </div> </div> 

Answer 1

Use this instead of using true, the default value of true is block: start and inline: nearest the body will go up(start). In your case its your parent element.

yourContent.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' })

Answer 2

Thank you all. I used ScrollTop instead of ScrollIntoView().

Here is my working code demo https://jsfiddle.net/6gu4rkc1/

content1.parentNode.scrollTop = content1.offsetTop - 30;