在第一次尝试@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()
itemOffset
(ScrollTo 不将负数作为值,因此为了向上滚动,您需要获取- 因此的绝对值Math.abs(itemOffset)
)。