js ou Jquery - obtention d'une zone visible de défilement div

Question

J'ai actuellement un div scrollable qui est rempli dynamiquement.
J'ai une fonction qui capture touches_appuyees et fléchées Haut et Bas change les classes au sein de la div parent d'avoir un enfant sélectionné à un moment (Essentiellement cette imite une entrée de sélection)

Voici ce que je veux faire: J'ai besoin la zone d'affichage de div à changer (augmenter ou baisser) pour afficher le plus récemment « choisi » enfant, mais seulement si cet enfant est pas déjà dans la zone visible du parent.

Alors, je dois obtenir la zone visible par rapport à la scrollHeight de la div mère en quelque sorte ... mais je ne suis pas sûr comment faire ...

En outre, je ne suis pas sûr de savoir comment définir la zone visible de la div parent.

Toute aide serait grandement appréciée!

Answer 1

Doh, figured it out

D'abord, je reçois la zone d'affichage via

var viewableTop = $("#parentDiv").scrollTop;
var viewableBottom = $("#parentDiv").innerHeight() + $("#parentDiv").scrollTop;

quoi que ce soit entre le viewableTop et viewableBottom est visible. Mais vraiment vous n'avez pas besoin de savoir. Au lieu de cela, vous devez savoir ce qui suit

//getting child position within the parent
var childPos = $("#childDiv").position().top;
//getting difference between the childs top and parents viewable area
var yDiff = ($("#childDiv").position().top + $("#childDiv").outerHeight()) - $("#parentDiv").innerHeight()

puis

//if upArrow and childPosition is above viewable area (that's why it goes negative)
if(event.keyCode == 38 && childPos < 0)
    $("#parentDiv").scrollTop += childPos;//add the negative number to the scrollTop
//if downArrow and the difference between childs top and parents viewable area is greater than the height of a childDiv
else if(event.keyCode == 40 && yDiff > $("#childDiv").outerHeight()-1)
    $("#parentDiv").scrollTop += yDiff;//add the difference to the parents scrollTop

Answer 2

Si vous utilisez jQuery, vous pouvez obtenir la position d'un élément par rapport à c'est positionné à l'aide des parents position(). Le div scrollable peut être réglé sur le positionnement relatif / absolu pour le rendre positionné.

, vous pouvez également changer scrollTop propriété pour modifier la position de défilement. Ou jquery scrollTop(pos).

Answer 3

vous devez obtenir l'intérieur div scrollTop, ajouter de la hauteur extérieure div à cela et que vous donnera les dimensions visibles