js ou Jquery - obtention de la zone visible de div scrollable

Question

J'ai actuellement un div défilable qui est peuplé dynamiquement.
J'ai une fonction qui capture touches_appuyees fléchées Haut et Bas et modifie 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 de la zone visible de la div pour changer (descendre ou monter) pour montrer le dernier enfant "sélectionné", mais seulement si cet enfant n'est pas déjà dans la zone visible du parent.

donc 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 ...

Aussi, je ne suis pas sûr comment définir la zone visible de la div parente

Toute aide serait grandement appréciée!

Answer 1

Doh, tout compris

D'abord, je reçois la zone visible via

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

donc tout ce qui est visible entre viewableTop et viewableBottom est visible. Mais vraiment tu n'as pas besoin de savoir ça. 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 à son parent positionné en utilisant position(). Le div scrollable peut être réglé sur le positionnement relatif/absolu pour le positionner.

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

Answer 3

vous devez obtenir le scrollTop de div intérieure, ajoutez la hauteur de outter div à cela et que vous donnera les dimensions visibles