JS ou JQuery - Obtendo área visualizável da div rollável
-
20-09-2019 - |
Pergunta
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!
Solução
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
Outras dicas
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)
.
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