0

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

原谅 ASCII 艺术：

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

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

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

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

4

2 回答 2

0

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

http://jsfiddle.net/8Kb7N/

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

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

于 2012-08-17T22:14:36.267 回答
0

在第一次尝试@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. 获取包含所有项目的容器的高度
  2. 获取被悬停的项目的高度
  3. 获取容器顶部到悬停项目顶部的距离
  4. 从容器的高度（第 1 行）中减去距离（第 3 行）
  5. 将第 4 行的差值从悬停项目的高度中减去（第 2 行）

现在，这告诉你两件事：

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

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

实际的滚动本身需要 jQuery ScrollTo插件，以便从当前滚动位置x向上或向下滚动像素数（而不是从容器的顶部，这是 jQuery 的内置函数所做的）。.scrollTop()

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

于 2012-08-21T14:14:26.547 回答