scrollIntoView块与内联

Question

我注意到scrollIntoView自从我上次查看以来有一些新选项。

即block和inline。这两者有什么区别？我猜测 {block: "start"}会将元素的顶部与页面的顶部对齐，但我不确定这与inline有什么不同，或者如何你会同时使用这两个选项吗？

Answer 1

block选项决定元素在其可滚动祖先的可见区域内垂直对齐的位置：

• 使用{block: "start"}，元素在其祖先的顶部对齐。
• 使用{block: "center"}，元素在其祖先的中间对齐。
• 使用{block: "end"}，元素在其祖先的底部对齐。
• 使用{block: "nearest"}元素：
  如果您目前位于其顶部，
  • 会在其祖先的顶部对齐。
  如果您目前位于其上方，
  • 会在其祖先的底部对齐。
  如果已经在视线中，
  • 保持不变。

inline选项决定元素在其可滚动祖先的可见区域内水平对齐的位置：

• 使用{inline: "start"}，元素在其祖先的左侧对齐。
• 使用{inline: "center"}，元素在其祖先的中心对齐。
• 使用{inline: "end"}，元素在其祖先的右侧对齐。
• 使用{inline: "nearest"}元素：
  如果您目前位于其右侧，
  • 会在其祖先的左侧对齐。
  如果您目前位于其左侧，
  • 会在其祖先的右侧对齐。
  如果已经在视线中，
  • 保持不变。

可以同时使用block和inline来滚动到一个动作中的指定点。

查看以下代码段，了解每项内容的实际效果。

<强>段：

＆＃13;

＆＃13;

/* ----- 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]
    });
  };
});

＆＃13;

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

＆＃13;

<!----- 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>

＆＃13;

＆＃13;

＆＃13;