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