Запретить браузеру повторное позиционирование целевых элементов, к которым осуществляется переход с помощью вкладок

Когда вы перемещаетесь по элементам формы или привязкам с помощью клавиши табуляции (и 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, так что это автоматическое поведение ничего не помогает.

Есть ли способ остановить это поведение? Я уже пробовал метод warnDefault() для событий onFocus в элементах привязки.

Источник

4 ответа

Решение

Я был в состоянии найти решение. Что делает браузер, так это то, что он прокручивает прямого родителя переполненного контента в позицию так, чтобы сфокусированный элемент находился прямо в центре. Просто модифицируя scrollLeft Свойство родительского элемента сделало свое дело. Так что в onFocus событие ссылки:

function onFocus (e) {
    document.getElementById('content-parent').scrollLeft = 0;
    // Code for repositioning the content itself using transform with transition animation
}
Источник

Вы могли бы установить tabindex="-1" для элементов, которые находятся за пределами экрана. Это предложено MDN.

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

Источник

Переполнение: скрытый, как правило, хорош для контента, который предназначен для прокрутки и перемещения, поэтому предотвратить это будет сложно. Если вы хотите, чтобы элемент управления Tab оставался только на видимых объектах (в том числе на кнопках или ссылках, которые обновляют ваш ползунок), то вам потребуется другой метод скрытия вашего контента в дополнение (или вместо) к переполнению.

Попробуйте отобразить: ничего в ваших элементах списка, пока они не окажутся внутри открытой / видимой части контейнера div#. Это удаляет их из DOM (и, следовательно, из фокуса клавиатуры), пока вы не будете готовы. Если вы создаете класс с именем "hidden", в котором просто отображается display: none, то единственный сценарий, который вам понадобится, - это добавить / удалить класс из элемента списка, когда используются элементы управления Left/Right. Я бы отредактировал ваш пример кода, чтобы продемонстрировать, но я сейчас на маленьком экране.

Проблема в том, что пользователи вашей клавиатуры не могут получить доступ к левому / правому элементам управления. Если вы измените их на кнопки или элементы ссылок, то они будут иметь поддержку клавиатуры по умолчанию в каждом браузере. И тогда все ваши пользователи полагаются на ваши левый / правый элементы управления, независимо от того, используют ли они мышь или клавиатуру, что дает вам больше контроля над тем, как они выглядят на каждом этапе.

Источник

Вы могли бы просто установить tabindex to -1 для ссылок, чтобы избежать фокусировки.

Источник
Другие вопросы по тегам