ScrollIntoView block vs inline

Question

I noticed that it scrollIntoViewhas several new parameters since the last view.

Namely, blockand inline. What is the difference between the two? I assume it {block: "start"}will align the top of the element with the top of the page, but I'm not sure how it will be different from inlineor how you will use both of these options at the same time?

Answer 1

The parameter blockdetermines 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 in the middle of its ancestor.
• {block: "end"}, .
• {block: "nearest"}, :
  • , .
  • , .
  • , .

inline , :

• {inline: "start"}, .
• {inline: "center"}, .
• {inline: "end"}, .
• {inline: "nearest"}, :
  • , .
  • , .
  • , .

block inline .

, , .

:

/* ----- 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>

Hide result