js oder JQuery - Erhalten sichtbaren Bereich von scrollbaren div

Question

Im Moment habe ich eine scrollbare div, die dynamisch aufgefüllt wird.
Ich habe eine Funktion, dass Captures UpArrow und Unten-Drücken von Tasten und ändert die Klassen innerhalb des übergeordneten div ein Kind zu einem Zeitpunkt ausgewählt haben (Im Grunde dieser ahmt ein Select-Eingang)

Hier ist, was ich tun möchte: Ich brauche den sichtbaren Bereich des div zu ändern (gehe nach oben oder unten) das zuletzt „ausgewählt“ Kind zu zeigen, aber nur, wenn das Kind noch nicht im sichtbaren Bereich der Mutter ist.

Also brauche ich den sichtbaren Bereich in Bezug auf die Scrollheight der Mutter div irgendwie zu erhalten ..., aber ich bin nicht sicher, wie dies zu tun ...

Auch ich bin nicht sicher, wie der sichtbaren Bereich des übergeordneten div eingestellt werden.

Jede Hilfe wäre sehr dankbar!

Answer 1

Doh, es heraus

Zuerst bekomme ich den sichtbaren Bereich über

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

so etwas zwischen dem viewableTop und viewableBottom sichtbar ist. Aber wirklich brauchen Sie nicht zu wissen. Stattdessen müssen Sie die folgende

wissen

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

dann

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

Wenn Sie jQuery verwenden, können Sie die Position eines Elements relativ zu seinen positioniert Eltern erhalten, indem position() verwenden. Die scrollbaren div kann auf relative / absolute Positionierung eingestellt werden, um sie positioniert sind.

Außerdem können Sie ändern scrollTop Eigenschaft die Bildlaufposition zu ändern. Oder jquery scrollTop(pos).

Answer 3

Sie müssen das innere div scrollTop bekommen, um das äußere div Höhe hinzufügen, und das wird Ihnen den sichtbaren Dimensionen