When moving through form elements or anchors using the tab key (and shift + tab), the browser automatically scrolls to the focused element. If the element is not visible due to being part of overflow content with a hidden overflow setting, the container's content is shifted to reveal the focused element. I am looking for a way to disable or counteract this behavior.
Here is an example demonstrating the issue in 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>The problem now is that there are two ways to slide the contents: by interacting with the left/right buttons and by using the tab navigation. When navigating tabs, it disrupts the sliding logic as the content becomes off-center and the saved index no longer matches what's on the screen. I can address the accessibility issue programmatically with an onFocus event, so this automatic scrolling isn't necessary.
Is there a method to disable this behavior? I have already attempted using the preventDefault() method on the onFocus events of the anchor elements.