垂直居中网页元素

Question

将焦点更改为网站的另一个元素（例如，通过按 TAB 到另一个输入字段）不在您的查看区域（例如，您位于页面底部而新元素位于顶部）时，所有浏览器（在 Windows 操作系统上测试过的 Internet Explorer、Firefox、Chrome）似乎滚动到足以使具有新焦点的元素可见。

例子：

Image
Text
Input text
...
Footer

当你在Footer和Image到Input text是不是你的可视区域内，你现在压片，从而进行焦点跳跃到Input text这个领域现在是你，但不可见的Image，也没有Text。

虽然这种行为在大多数情况下可能是合适的，但在我的情况下却不是。为了防止它，我建议聚焦元素垂直居中。如何才能做到这一点？

为了更清楚地说明：

这是整个页面：

我向下滚动到底部，所以只有“这是页脚”可见：

我现在通过按 Tab 键来改变焦点。焦点跳转到文本输入。不幸的是，此文本字段上方的元素不可见：

Answer 1

如果将图像和文本与输入一起包装到标签中，则它似乎无需脚本即可工作。

<label for="input1">
  <img src="http://placehold.it/350x50"><br>
  Some text that should be visible
  <input id="input1" type="text">
</label>
<br>
<br>
<br>
<label for="input2">
  <img src="http://placehold.it/350x50"><br>
  Some text that should be visible
  <input id="input2" type="text">
</label>
<br>
<br>
<br>
<label for="input3">
  <img src="http://placehold.it/350x50"><br>
  Some text that should be visible
  <input id="input3" type="text">
</label>
<br>
<br>
<br>
<label for="input4">
  <img src="http://placehold.it/350x50"><br>
  Some text that should be visible
  <input id="input4" type="text">
</label>
<br>

我您不能使用标签，我建议您添加一个事件处理程序，您可以在其中捕获“tab 键”，获取具有焦点的元素并获取其父元素（可能包含您的输入以及文本和图像）并滚动它父母进入视野

document.activeElement.parentNode.scrollIntoView();

或者你需要计算document.activeElement的位置并将其滚动到中心，这是ThinkingStiff制作的一个很好的方法，我用一种scrollIntoViewCenter方法更新了它。

Element.prototype.documentOffsetTop = function () {
    return this.offsetTop + ( this.offsetParent ? this.offsetParent.documentOffsetTop() : 0 );
};
Element.prototype.scrollIntoViewCenter = function () {
  window.scrollTo( 0, this.documentOffsetTop() - (window.innerHeight / 2 ) );
};

这是一个显示该scrollIntoViewCenter方法的片段。

document.activeElement.parentNode.scrollIntoView();

Element.prototype.documentOffsetTop = function () {
    return this.offsetTop + ( this.offsetParent ? this.offsetParent.documentOffsetTop() : 0 );
};
Element.prototype.scrollIntoViewCenter = function () {
  window.scrollTo( 0, this.documentOffsetTop() - (window.innerHeight / 2 ) );
};