9

当您使用 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>

问题是现在有两种滑动内容的方法：通过与左|右按钮交互和通过链接切换。当用户选择使用选项卡进行导航时，它会打乱滑动逻辑。内容偏离中心，我保存在变量中的索引不再代表屏幕上可见的内容。我可以使用 onFocus 事件以编程方式处理可访问性问题，因此这种自动行为没有任何帮助。

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

4

4 回答 4

9

我能够想出一个解决方案。浏览器所做的是将溢出内容的直接父级滚动到该位置，以便焦点元素位于中心。只需修改scrollLeft父元素的属性就可以了。所以在onFocus链接的情况下：

function onFocus (e) {
    document.getElementById('content-parent').scrollLeft = 0;
    // Code for repositioning the content itself using transform with transition animation
}
于 2016-04-13T15:52:21.420 回答
0

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

尝试在列表项上显示：无，直到它们位于 div#container 的打开/可见部分内。这会将它们从 DOM 中删除（因此从键盘焦点中删除），直到您准备好为止。如果您创建一个名为“hidden”的类，其中仅包含 display:none，那么您需要的唯一脚本就是在使用左/右控件时从列表项中添加/删除该类。我会编辑你的代码示例来演示，但我现在在一个小屏幕上。

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

于 2016-04-07T11:37:12.763 回答
0

您可以只设置tabindex to -1链接以避免聚焦。

于 2016-04-07T12:03:05.570 回答
0

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

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

于 2018-04-18T08:45:21.657 回答