js lub Jquery - uzyskiwanie widocznego obszaru przewijanego div

Question

Mam obecnie przewijany div, który jest wypełniany dynamicznie.
Mam funkcji, który przechwytuje ze strzałkami naciśnięć klawiszy i zmienia zajęcia w ramach div mieć jedno dziecko wybrany naraz (w zasadzie to naśladuje select input)

Tutaj jest to, co chcę zrobić: Potrzebuję obszaru widocznego elementu div do zmiany (w dół lub w górę), aby pokazać ostatnie "wybrane" dziecko, ale tylko wtedy, gdy to dziecko nie znajduje się już w widocznym obszarze rodzica.

Więc muszę uzyskać widocznego obszaru w stosunku do scrollHeight div nadrzędnej jakoś ... ale nie jestem pewien jak to zrobić ...

Ponadto, nie jestem pewien jak ustawić widoczny obszar rodzica div.

Każda pomoc będzie bardzo ceniona!

Answer 1

Doh, zorientowaliśmy się

pierwszy dostać obszaru widzialnego poprzez

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

, więc można wyświetlić dowolne elementy między widokiem viewableTop i viewableBottom. Ale tak naprawdę nie musisz tego wiedzieć. Zamiast tego trzeba wiedzieć, co następuje

//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() 

następnie

//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

Jeśli używasz jQuery, możesz uzyskać pozycję elementu w stosunku do pozycji nadrzędnej, używając position(). Przewijany element div można ustawić w położeniu względnym/bezwzględnym, aby był ustawiony.

Możesz także zmienić właściwość scrollTop, aby zmienić pozycję przewijania. Lub jquery scrollTop(pos).

Answer 3

trzeba dostać śródmiejskiego div za scrollTop, dodać wysokość outter div do tego i że daje widocznych Rozmiary