JS ou JQuery - Obtendo área visualizável da div rollável

Question

Atualmente, tenho um div rolável que é preenchido dinamicamente.
Eu tenho uma função que captura uprawrow e Downarrow Keypresses e altera as classes dentro da divad

Aqui está o que eu quero fazer: preciso que a área visível da DIV mude (desça ou para baixo) para mostrar o filho mais recentemente "selecionado", mas apenas se essa criança ainda não estiver na área visível do pai.

Então, preciso obter a área visível em relação ao peso da divisão de de alguma forma pai ... mas não tenho certeza de como fazer isso ...

Além disso, não tenho certeza de como definir a área visível da div.

Qualquer ajuda seria muito apreciada!

Answer 1

Doh, descobriu isso

Primeiro eu recebo a área visível via

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

Portanto, qualquer coisa entre o Viewabletop e o ViewableBottom é visível. Mas realmente você não precisa saber disso. Em vez disso, você precisa saber o seguinte

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

então

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

Se você estiver usando o jQuery, poderá obter a posição de um elemento em relação ao pai posicionado usando position(). A div rolável pode ser definida como posicionamento relativo/absoluto para torná -lo posicionado.

Além disso, você pode mudar scrolltop propriedade para alterar a posição de rolagem. Ou jQuery scrollTop(pos).

Answer 3

Você precisa obter o scrolltop da div interior, adicione a altura da divisão a isso e isso lhe dará as dimensões visíveis