Javascript 将光标悬停在剪裁的项目上时滚动div

这是一个很难描述的问题……我的页面上有一个固定高度的

，里面有一堆内容项。每个项目都是一个正方形，向左浮动，因此它们从左到右、从上到下填充区域。如果视图中的项目太多，则内容区域将滚动（

overflow-y:auto

）

原谅ASCII艺术：

---------------------
| [ 1 ] [ 2 ] [ 3 ] |
| [ 4 ] [ 5 ] [ 6 ] |
| [ 7 ] [ 8 ] [ 9 ] |
---------------------

问题是，如果底部的一排没有被剪掉，里面的物品就不能完全适合这个区域。因此，我想做的是，当用户将鼠标悬停在从内容区域底部剪下的项目上时，以某种方式自动向下滚动视图

我不知道该如何确定某个特定项目是否被剪裁

这真的很奇怪吗？或者有没有一种合乎逻辑的方法可以做到这一点？

这是一个非常基本的例子

基本上，每个方形div内部都有一个带有唯一名称的关联锚点

---

要为每个将window.location设置为其锚点名称的项目设置悬停事件。这应该可以让它在区域内导航。

在第一次尝试@Geuis方法后，我意识到我解决了错误的问题，因为最后一行项目不一定是被剪裁的同一行

例如，假设我在3x4网格中有12个项目：每行3个项目，总共4行。然后说我的容器只够显示前两行和第三行的上半部分。最后一行是第四行，但是被剪裁的行是第三行，假设我被滚动到顶部。或者，如果我滚动到容器的底部呢？现在，第二排正在被剪裁，从顶部而不是底部剪下

因此我意识到，我需要查看悬停在上面的特定项目，而不是查看行，并确定单个项目是否完整显示。如果是，什么也不做；如果不是，则根据剪辑项目的哪一端向上或向下滚动

这是我想到的。悬停时：

var containerHeight = $container.height(),
    itemHeight = $(this).height(),
    itemOffset = Math.floor($(this).position().top),
    itemVisible = containerHeight - itemOffset,
    itemClip = itemHeight - itemVisible;

if (itemClip > 0){
    $container.scrollTo('+=' + itemClip, 600);
} else if (itemOffset < 0){
    $container.scrollTo('-=' + Math.abs(itemOffset), 600);
}

var containerHeight=$container.height（），
itemHeight=$（this）.height（），
itemOffset=数学地板（$（this）.position（）.top），
itemVisible=容器高度-itemOffset，
itemClip=itemHeight-itemVisible；
如果（itemClip>0）{
$container.scrollTo（'+='+itemClip，600）；
}否则如果（itemOffset<0）{
$container.scrollTo（'-='+Math.abs（itemOffset），600）；
}

（

$container

在脚本的其他地方定义为containing

div

）

逐行：

获取容纳所有项目的容器的高度

获取悬停项目的高度

获取容器顶部到悬停项目顶部的距离

从容器高度（第1行）中减去距离（第3行）

取第4行的差值，从悬停项目的高度中减去（第2行）

现在，这告诉你两件事：

• 如果第3行的结果为负数，则该项目将被剪裁超过容器顶部的像素数
• 如果第5行的结果是肯定的，则该项目将被剪裁超过容器底部的像素数

知道这一点后，您可以按正确的方向和距离滚动容器，以显示整个项目

实际的滚动本身需要jQuery插件才能从当前滚动位置向上或向下滚动

x

像素数（而不是从容器顶部，这是jQuery内置的

.scrollTop（）

函数所做的）

---

（ScrollTo不接受负数作为值，因此为了向上滚动，需要获得

itemOffset

的绝对值-因此

Math.abs（itemOffset）

）。

我想到了使用锚和目标。你当然可以，但我会考虑这样做的后果。这可能对用户体验有害。想象一下成百上千个这样的div。如果您滚动到刚好跨过折叠div的底部，用户仍然必须手动滚动到更低的div。如果你滚动一点越过横跨折叠div的底部，以便显示更低的div，现在用户的鼠标可能会悬停在更低的div上，这将再次触发滚动。这不是不可克服的；我只是想让你想想你是否真的想这样做。@ZachShipley我之所以想这样做，是因为个人

div

s，当鼠标悬停在上方时，“展开”使其高度加倍以显示其他信息。因此，如果特定的

div

位于内容区域的底部，并且您将鼠标悬停在其上，则必须手动向下滚动以查看展开的部分。哦……这很聪明。但是，当任何项目悬停在上面时，这不会导致视图滚动吗？我真的只希望它在被悬停的特定项目被剪裁在底部时滚动。获取包含div的宽度/高度。获取每个内部div的宽度和高度。使用此值计算行数和每行中的项目数。从中，您可以选择最后n个div，并仅对其应用锚定技术。