Question

我目前有一个动态填充的可滚动div 我有一个捕获UpArrow和DownArrow keyPresses的函数，并更改父div中的类，以便一次选择一个子节点（基本上这模仿了一个选择输入）

这是我想要做的：我需要div的可视区域来更改（向下或向上）以显示最近“选中”的子项，但前提是该子项尚未位于父项的可查看区域中。

所以我需要以某种方式获得与父div的scrollHeight相关的可视区域......但我不知道该怎么做...

另外，我不知道如何设置父div的可视区域。

非常感谢任何帮助！

Answer 1

Doh，想通了

首先我通过

获取可视区域

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

所以viewableTop和viewableBottom之间的任何东西都是可见的。但实际上你不需要知道这一点。相反，你需要知道以下

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

然后

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

如果您使用的是jQuery，则可以使用position()获取元素相对于其定位父级的位置。可滚动div可以设置为相对/绝对定位以使其定位。

此外，您可以更改scrollTop属性以更改滚动位置。或者jquery scrollTop(pos)。

Answer 3

你需要获得内部div scrollTop，将外部div高度添加到那里，这将为您提供可视尺寸

js或Jquery - 获取可滚动div的可视区域

3 个答案: