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

【问题标题】：js or Jquery - obtaining viewable area of scrollable divjs 或 Jquery - 获取可滚动 div 的可视区域
【发布时间】：2026-01-12 21:05:01
【问题描述】：

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

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

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

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

任何帮助将不胜感激！

【问题讨论】：

标签： javascript scroll custom-scrolling

【解决方案1】：

呵呵，想通了

首先我通过

获得可视区域

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

谢谢，是的，我最终自己解决了这个问题。我发布了我自己的答案哈哈。我最初尝试过这个，但它不起作用......然后在尝试了一个小时后，我回到它并让同事看了它......他只是指出“scrollTop”没有拼写“srollTop”哈哈，简单的错误......然后我想把头撞在我的桌子上，因为一些如此微不足道的事情

【解决方案3】：

您需要获取内部 div 的 scrollTop，将外部 div 的高度添加到其中，这将为您提供可视尺寸

【讨论】：