scrollIntoView() moves the whole page layout up

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>

take a look this [question](https://stackoverflow.com/questions/635706/how-to-scroll-to-an-element-inside-a-div) — shmnff, Jul 31 '19 at 03:31
You mean you are in the same case as this fiddle (inside an iframe)? — Kaiido, Jul 31 '19 at 03:31
check this https://stackoverflow.com/questions/11039885/scrollintoview-causing-the-whole-page-to-move — Nidhin Joseph, Jul 31 '19 at 03:35

score 7 · Answer 1 · answered Jul 31 '19 at 03:53

7

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' })

answered Jul 31 '19 at 03:53

Vince Zuño

71
3

score 0 · Answer 2 · answered Jul 31 '19 at 04:14

0

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;

answered Jul 31 '19 at 04:14

balaG

431
1
8
16

scrollIntoView() moves the whole page layout up

2 Answers2