javascript scrollIntoView 块与内联

scrollIntoView block vs inline

提问by mpen

I noticed scrollIntoViewhas some new options since last I looked.

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

Namely, blockand inline. What's the difference between these two? I'm guessing{block: "start"}will align the top of the element with the top of the page, but I'm not sure how that would be different from inline, or how you would use both these options simultaneously?

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

回答by Angel Politis

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

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

• 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.

• 使用{block: "start"}，元素在其祖先的顶部对齐。
• 使用{block: "center"}，元素在其祖先的中间对齐。
• 使用{block: "end"}，元素在其祖先的底部对齐。
• 使用{block: "nearest"}，元素：
  • 如果您当前在它的下方，则在其祖先的顶部对齐。
  • 如果您当前在它的上方，则在其祖先的底部对齐。
  • 保持原样，如果它已经在视图中。

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

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

• 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.

• 使用{inline: "start"}，元素在其祖先的左侧对齐。
• 使用{inline: "center"}，元素在其祖先的中心对齐。
• 使用{inline: "end"}，元素在其祖先的右侧对齐。
• 使用{inline: "nearest"}，元素：
  • 如果您当前在其右侧，则在其祖先的左侧对齐。
  • 如果您当前在其左侧，则在其祖先的右侧对齐。
  • 保持原样，如果它已经在视图中。

Both blockand inlinecan be used at the same time to scroll to a specified point in one motion.

二者block并inline可以在同一时间在一个运动被用来滚动到指定的点。

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>