在Chrome中，当通过Tab键切换到屏幕外元素时，如何防止页面跳动

Question

在Chrome中，当通过Tab键切换到屏幕外元素时，如何防止页面跳动

11

在Chrome中运行以下代码，并按Tab键直到窗口滚动:

<ol>
  <li><input type="text" autofocus></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li>
</ol>

注意焦点元素会跳到其窗口的中间位置。这会使得数据输入变得烦人，所以我更愿意页面平滑地向上滚动，保持新焦点元素在底部。这种情况似乎只发生在Chrome浏览器中。

我可以使用JavaScript来防止这种行为：

$(document).on('focus', 'input', function() {
  let top = $(this).parent().position().top,
      scroll = $(window).scrollTop(),
      inputHeight = $('input').height(),
      windowHeight = $(window).height();

  if (top < scroll + inputHeight) {
    window.scrollBy(0, -inputHeight);
  } else if (top > scroll + windowHeight - inputHeight * 2) {
    window.scrollBy(0, inputHeight);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol>
  <li><input type="text" autofocus></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li>
</ol>

但我想知道是否有HTML或CSS解决方案。（我也可以接受更优雅的JavaScript解决方案。）

编辑

我想出了一个更简单的解决方案，但它会导致页面在每次按Tab（或Shift+Tab）时滚动一像素：

$('input').keydown(function(evt) {
  if(evt.key == 'Tab') {
    window.scrollTo(0, window.scrollY + (evt.shiftKey ? -1 : 1));
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol>
  <li><input type="text" autofocus></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li>
</ol>

- Rick Hitchcock

我没有看到这两个代码片段的行为有任何区别。 - Emeeus

1

谢谢，@hev1，我已经改成“反复按 Tab 键。” - Rick Hitchcock

@RickHitchcock 没问题。 - Unmitigated

1

好的，反复按下（相当缓慢）我看到了差异。 - Emeeus

谢谢，@Emeeus。我更希望当滚动到（或接近）底部时它能够滚动，以保持与大多数其他接受数据输入的程序（如电子表格、数据库、文字处理器等）的一致性。 - Rick Hitchcock

显示剩余7条评论

4个回答

2

HTML/CSS 无法解决此问题，您需要使用 JavaScript 来处理。我能想到的最简单的方法是使用 Element.scrollIntoView() 方法。

Element.scrollIntoView()

Element.scrollIntoView() 方法将调用它的元素滚动到浏览器窗口的可见区域内。目前该 API 仍处于试验阶段，但大多数现代浏览器都已支持其使用，包括 Chrome。（查看浏览器兼容性）

(function ($) {
    var shouldScroll = false;
    $(document).on('focus', 'input', function () {
        if (shouldScroll) {
            this.scrollIntoView(false);
            shouldScroll = false;
        }
    });
    $(document).on('keydown', 'input', function (e) {
        if (e.keyCode == 9) shouldScroll = true;
    });
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol>
  <li><input type="text" autofocus></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li>
</ol>

注意:请在全屏/展开代码片段模式下查看。

- Munim Munna

感谢您的解答，scrollIntoView 可以将元素定位到屏幕顶部或底部。您的解决方案对于 Tab 很有效，但对于 Shift+Tab 来说效果不太好（光标会停留在底部，除非您在第一个屏幕上）。scrollIntoViewIfNeeded 看起来很有前途，但我还没有成功过。 - Rick Hitchcock

我最初认为光标停留在底部对于数据输入来说是一个好主意。scrollIntoViewIfNeeded 不起作用，因为输入会跳到中间，不需要滚动，这让我花了一段时间才弄明白。 - Munim Munna

这并不一定是个坏主意。但是试试这个：将您的代码片段全屏运行，并切换到第80行。现在单击#60。请注意，光标跳转到屏幕底部可能会让进行数据输入的人感到困惑。屏幕应该只在需要时滚动-而且应该平稳地滚动-就像Excel或Google表格一样。(很有趣看看谷歌如何为Google表格处理此问题。) - Rick Hitchcock

我注意到了这一点，原因是即使被点击聚焦的输入框，scrollIntoView方法也会被调用，但实际上它不应该。我已经在研究中，有进展时会及时通知您更新情况。 - Munim Munna

在点击时取消事件并不困难。但是，如果元素已经在屏幕上，则您需要处理 Shift-Tab - 仅此而已。到那时，代码可能会变得与我已经使用的代码一样复杂。 - Rick Hitchcock

1

这对于向前（Tab）或向后（Shift+Tab）进行标签非常顺畅。

首先计算第一个和最后一个可见的“像素”或“索引”。

然后比较所需的像素/索引是否适合该范围内。

如果不适合，则进行调整。

$('input').focusin(function(e) {
  let height = $(window).height();
  let scroll = $(window).scrollTop();

  let position = $(this).position().top;
  let elementHeight = $(this).height();

  let firstVisibleIndex = scroll;
  let lastVisibleIndex = scroll + height;  
  let additionalSpace = 5 * elementHeight;

  let newScrollTop;

  if(position + additionalSpace > lastVisibleIndex) {
    newScrollTop = position - height + additionalSpace;
  }

  if(position - additionalSpace < firstVisibleIndex) {
    newScrollTop = position - additionalSpace;
  }

  $(window).scrollTop(newScrollTop);
});

https://jsfiddle.net/yo12fgLj/115/

- S.Loyft

谢谢。这与我对Tab的解决方案类似（我还有一个类似的Shift-Tab的解决方案没有发布）。仍然希望有一个更简单的解决方案。 - Rick Hitchcock

我已经更新了我的帖子，并附上了我在生产中使用的代码。我为了发布的目的对其进行了简化，所以很抱歉让你浪费时间重新创建我已经完成的内容。 - Rick Hitchcock

3

不用道歉，这反而是很好的练习。如果有其他解决方法，我也很感兴趣。 - S.Loyft

0

我已经想出了一个纯CSS的解决方案。

只需在焦点上改变输入框的高度，即使是稍微改变一下，就可以解决问题：

input:focus {
  background: yellow;
  transform: scaleY(1.00001);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol>
  <li><input type="text" autofocus></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li>
</ol>

这是它能够工作的原因：

当聚焦于部分屏幕外的元素时，Chrome 只滚动所需的部分。当聚焦于完全屏幕外的元素时，Chrome 将其滚动到屏幕中心。

通过增加聚焦时的高度，如果需要，窗口会滚动以适应新聚焦的元素。

当您切换到下一个元素时，上一个元素会恢复到先前的高度。但是窗口已经滚动到足以使下一个元素部分可见。

这足以防止 Chrome 将其滚动到屏幕中心。

这适用于 Tab 和 Shift+Tab。

- Rick Hitchcock

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kosh · Accepted Answer

这里不需要使用JS，因为Chrome支持scroll-behavior属性：

html {
  scroll-behavior: smooth;
}

<ol>
  <li><input type="text" autofocus></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li>
</ol>