将鼠标悬停在剪辑项目上时滚动 div答案

【问题标题】：Scroll a div when hovering over a clipped item将鼠标悬停在剪辑项目上时滚动 div
【发布时间】：2012-08-17 21:50:12
【问题描述】：

这是一个很难描述的问题...我的页面上有一个固定高度<div>，里面有一堆内容项。每个项目都是一个正方形<div>，向左浮动，因此它们从左到右和从上到下填充区域。如果视图中的项目太多，则内容区域将滚动 (overflow-y: auto)。

请原谅 ASCII 艺术：

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

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

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

这完全古怪吗？或者有这样做的合乎逻辑的方法吗？

【问题讨论】：

我有一个使用锚点和目标的想法。让我把小提琴放在一起
当然可以，但我会考虑这样做的后果。这可能对用户体验有害。想象数百个这样的 div。如果您滚动到跨折叠 div 的底部，用户仍然必须手动滚动才能到达低于该位置的更低 div。如果您滚动一点越过跨折叠 div 的底部，以便显示更低的 div，现在用户的鼠标可能悬停在更低的 div 上，这将再次触发滚动。这不是不可克服的；我只是想让你想想你是否真的想这样做。
@ZachShipley 我之所以要这样做是因为个人divs 将鼠标悬停在上方时，会“展开”以使其高度加倍以显示其他信息。因此，如果特定的div 位于内容区域的底部并且您将鼠标悬停在它上面，您必须手动向下滚动才能看到展开的部分。

标签： javascript scroll dimensions clip

【解决方案1】：

这是一个非常基本的例子。

http://jsfiddle.net/8Kb7N/

基本上，您的每个方形 div 内部都会有一个关联锚点，其名称是唯一的。

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

【讨论】：

哦...这很聪明。但是，当任何项目悬停时，这不会导致视图滚动吗？如果悬停的特定项目被夹在底部，我真的只希望它滚动。
获取包含的 div 的宽度/高度。获取每个内部 div 的宽度和高度。使用它来计算行数和每行中的项目数。从中，您可以选择最后 n 个 div 并仅将锚技术应用于它们。

【解决方案2】：

在第一次尝试@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);
}

（$container 在我的脚本中的其他地方定义为包含div）

一行一行：

获取包含所有项目的容器的高度
获取悬停项目的高度
获取容器顶部到悬停项顶部的距离
从容器高度（第 1 行）中减去距离（第 3 行）
将第 4 行的差值从悬停项目的高度中减去（第 2 行）

现在，这告诉你两件事：

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

知道了这一点，您就可以将容器沿正确的方向滚动正确的距离以显示整个项目。

实际的滚动本身需要 jQuery ScrollTo 插件才能向上或向下滚动x 从当前滚动位置的像素数（不是从容器的顶部，即jQuery 的内置 .scrollTop() 函数做了什么）。

（ScrollTo 不将负数作为值，因此为了向上滚动，您需要获取itemOffset 的绝对值 - 因此Math.abs(itemOffset)）。

【讨论】：