scrollIntoView block vs inline

javascript, js-scrollintoview

Solution

The `block` option decides where the element will be vertically aligned inside the visible area of its scrollable ancestor:

- Using `{block: "start"}`, the element is aligned at the top of its ancestor.

- Using `{block: "center"}`, the element is aligned at the middle of its ancestor.

- Using `{block: "end"}`, the element is aligned at the bottom of its ancestor.

- Using `{block: "nearest"}`, the element:

- is aligned at the top of its ancestor if you're currently below it.

- is aligned at the bottom of its ancestor if you're currently above it.

- stays put, if it's already in view.

The `inline` option decides where the element will be horizontally aligned inside the visible area of its scrollable ancestor:

- Using `{inline: "start"}`, the element is aligned at the left of its ancestor.

- Using `{inline: "center"}`, the element is aligned at the centre of its ancestor.

- Using `{inline: "end"}`, the element is aligned at the right of its ancestor.

- Using `{inline: "nearest"}`, the element:

- is aligned at the left of its ancestor if you're currently on its right.

- is aligned at the right of its ancestor if you're currently on its left.

- stays put, if it's already in view.

Both `block` and `inline` can be used at the same time to scroll to a specified point in one motion.

Check out the following snippet to see how each works in action.

Snippet:

/* ----- JavaScript ----- */
var buttons = document.querySelectorAll(".btn");

[].forEach.call(buttons, function (button) {
  button.onclick = function () {
    var where = this.dataset.where.split("-");
    document.querySelector("div#a1").scrollIntoView({
      behavior: "smooth",
      block: where[0],
      inline: where[1]
    });
  };
});

/* ----- CSS ----- */
body {
  padding: 500px;
  width: 2000px;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100;
}

div#a1 {
  width: 1000px;
  height: 300px;
  background: url(//www.w3schools.com/css/trolltunga.jpg);
  background-repeat: no-repeat;
}

<!----- HTML ----->
<header>
  <button class="btn" data-where="start-start">T-L</button>
  <button class="btn" data-where="start-center">T-C</button>
  <button class="btn" data-where="start-end">T-R</button>
  <button class="btn" data-where="center-start">C-L</button>
  <button class="btn" data-where="center-center">C-C</button>
  <button class="btn" data-where="center-end">C-R</button>
  <button class="btn" data-where="end-start">B-L</button>
  <button class="btn" data-where="end-center">B-C</button>
  <button class="btn" data-where="end-end">B-R</button>
</header>

<div id = "a1"></div>

Problem

Original source