Je suis en train de créer une boîte à suggestions automatique personnalisée dont je dois passer aux éléments li
lorsque vous appuyez sur la flèche.
donc j'ai ajouté l'attribut tabindex à li, c'est obtenir le focus. mais le problème est que cela fait défiler la div avec une hauteur aléatoire qui le sépare de li sélectionné.
après la flèche vers le bas:
et après avoir appuyé sur la touche flèche bas:
et après cela, l'écran s'éteint et la souris se comporte parfaitement.
Ici, j’ai fait un Démo JSFiddle Cliquez d’abord sur item1
, puis appuyez sur la flèche vers le bas, il se comporte de la même manière.
Expliquer mon commentaire
Définissez la variable scrollTop
du conteneur sur index of focused li
* li height
.
return false
on keydown pour empêcher le défilement normal du parent débordé dans le navigateur.
$('div.container').on('focus', 'li', function() {
var $this = $(this);
$this.addClass('active').siblings().removeClass();
$this.closest('div.container').scrollTop($this.index() * $this.outerHeight());
}).on('keydown', 'li', function(e) {
var $this = $(this);
if (e.keyCode === 40) {
$this.next().focus();
return false;
} else if (e.keyCode === 38) {
$this.prev().focus();
return false;
}
}).find('li').first().focus();
jsfiddle http://jsfiddle.net/38zR3/42/
Avez-vous essayé d'utiliser anchor au lieu de tabindex? par exemple
<li><a href="#"></li>
D'après mon expérience, certains navigateurs ne peuvent pas gérer correctement le focus sur tabindex
J'ai eu un problème comme celui-ci une fois et je l'ai résolu en définissant le style CSS overflow
de la div contenant sur none
ou hidden
en fonction de vos préférences.
Ajoutez un .scrollTop()
pour vous assurer qu’il est soit centré, soit comme vous le souhaitez.