Question

当您使用Tab键（和shift + tab）浏览表单元素或锚点时，浏览器会自动滚动到该焦点元素。如果元素不可见，因为它是溢出内容的一部分，其中溢出被设置为隐藏，它移动（或滚动）内容的容器以显示聚焦元素。我想停止或找到一种方法来否定这种行为

这是我放在一起展示这个问题的东西。我在Chrome中复制了它。

https://jsfiddle.net/charlieko/wLy7vurj/2/

var container = $("#container")
var cur = 0;

function go(increment) {
  var next = cur + increment;
  if (next < 0) next = 4;
  else if (next > 4) next = 0;
  cur = next
  var newX = cur * 500;
  container.css({
    transform: 'translate(-' + newX + 'px, 0)'
  })
}

$("#left").click(function(e) {
  go(-1);
});
$("#right").click(function(e) {
  go(1);
});

body {
  overflow: hidden;
}
#container {
  width: 2600px;
  overflow: none;
  transition: transform 0.4s;
  transform: translate(0, 0);
  overflow: hidden;
  margin: 0;
}
li {
  width: 500px;
  text-align: center;
  list-style-type: none;
  float: left;
  margin: 0;
  padding: 0;
}
a {
  color: black;
  font-size: 2.0rem;
}
#ui {
  position: fixed;
  top: 200px;
}
#ui span {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <ul>
    <li><a href="#">Link 1</a> | ABCD EFG</li>
    <li><a href="#">Link 2</a> | HIJK LMNO</li>
    <li><a href="#">Link 3</a> | PQRSTU VW</li>
    <li><a href="#">Link 4</a> | XYZA BC</li>
    <li><a href="#">Link 5</a> | DEFG HI</li>
  </ul>
</div>
<div id="ui">
  <div>
    <span id="left">Left</span>
    |
    <span id="right">Right</span>
  </div>
  <p>
    Use left and right to move. Issue: Use tab key (and shift+tab) to navigate to any of the links. The container of the links shift to show the focused link. Notice the content is decentered when it happens.
  </p>
</div>

问题在于，现在有两种方式可以滑动内容：通过与左|右按钮交互并通过链接进行Tab键。当用户选择使用选项卡进行导航时，它会使滑动逻辑变得混乱。内容是以中心为中心的，我保存在变量中的索引不再代表屏幕上可见的内容。我可以使用onFocus事件以编程方式处理可访问性问题，因此这种自动行为对任何事情都无济于事。

有没有办法阻止这种行为？我已经对锚元素上的onFocus事件尝试了preventDefault（）方法。

Answer 1

我能够找到解决方案。浏览器的作用是将溢出内容的直接父级滚动到该位置，以便聚焦元素位于中心。只需修改父元素的scrollLeft属性即可。所以在链接的onFocus事件中：

function onFocus (e) {
    document.getElementById('content-parent').scrollLeft = 0;
    // Code for repositioning the content itself using transform with transition animation
}

Answer 2

您可以为屏幕外的元素设置tabindex="-1"。这是MDN建议的。

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex

Answer 3

溢出：隐藏通常适用于要滚动和移动的内容，因此防止这种情况很困难。如果您希望Tab控件仅保留在可见的内容（包括更新滑块的任何按钮或链接），那么除了（或代替）溢出之外，您还需要一种隐藏内容的不同方法。

在列表项目上尝试display：none，直到它们位于div＃container的打开/可见部分。这会将它们从DOM中移除（因此也不会从键盘焦点移除），直到您准备好。如果您创建了一个名为“隐藏”的类。只显示：其中没有，然后你需要的唯一脚本是在使用左/右控件时从列表项中添加/删除类。我编辑您的代码示例以进行演示，但我现在只是在一个小屏幕上。

问题是你的键盘用户无法触及左/右控件。如果您将其更改为按钮或链接元素，则默认情况下，他们会在每个浏览器中都支持键盘。然后，无论用户是使用鼠标还是键盘，您的所有用户都依赖于左/右控件，这样您就可以更好地控制每个阶段的显示效果。

Answer 4

您可以为链接设置tabindex to -1以避免重点关注。

防止浏览器重新定位通过Tab键导航到的聚焦元素

4 个答案: