jQuery : mettez en surbrillance un élément dans une div saturé

Question

j'ai 20 liste des éléments à l'intérieur d'un div qui ne peut afficher que les 5 à la fois. ce qui est un bon moyen pour faire défiler jusqu'à l'élément n ° 10, et le point n ° 20.

je sais que la hauteur de tous les éléments.

le scrollTo plugin fait cela, mais sa source n'est pas super facile à comprendre, sans vraiment s'en imprégner. important - je ne veux pas utiliser ce plugin

disons que j'ai une fonction qui prend 2 éléments $parentDiv, $innerListItem

ni $innerListItem.offset().haut, ni $innerListItem.position().haut me donne la bonne scrollTop pour $parentDiv

Answer 1

L' $innerListItem.position().top est en fait par rapport à l' .scrollTop() de son premier ancêtre positionné. Ainsi, la manière de calculer le bon $parentDiv.scrollTop() de la valeur est de commencer par faire en sorte que $parentDiv est positionné. Si ce n'est pas déjà explicite position, utilisez position: relative. Les éléments $innerListItem et de tous ses ancêtres jusqu'à $parentDiv devez avoir aucune position explicite. Maintenant, vous pouvez faire défiler à l' $innerListItem avec:

// Scroll to the top
$parentDiv.scrollTop($parentDiv.scrollTop() + $innerListItem.position().top);

// Scroll to the center
$parentDiv.scrollTop($parentDiv.scrollTop() + $innerListItem.position().top
    - $parentDiv.height()/2 + $innerListItem.height()/2);

Answer 2

Il s’agit de mon propre plugin (se positionne l’élément en haut de la la liste. Spécialement pour overflow-y : auto. Peut ne pas fonctionner avec overflow-x !) :

Si vous n’avez pas besoin d’être animés, utilisez :

Comment utiliser :

Remarque : #innerItem peut se situer à l’intérieur de #overflow_div. Il ne doit vraiment pas être un enfant direct.

Testé sous Firefox (23) et Chrome (28)

Answer 3

J’ai ajusté réponse Glenn Moss au compte pour le fait que déborder div pourrait ne pas être en haut de la page.

``

J’utilisais cela sur une application de cartes de google avec un modèle réactif. Sur résolution > 800px, la liste est sur le côté gauche de la carte. Sur résolution