如何根据页面上的当前位置更改滚动到的位置？

Question

抱歉，如果我的问题不清楚，我很难正确地表达它。

我有一系列 100% 宽度的类似画廊的图像，顶部有一些侧箭头可以浏览它们。我很难想出一种方法，可以让我根据屏幕上当前的图像更改箭头滚动到的位置。

我基本上需要这样的东西：

如果 (element2) 当前占用了 100% 的视口，让 (leftarrow) 转到 (element1) 并让 (rightarrow) 转到 (element3)

我已经尝试过表达这将意味着什么，例如：

1. 检查 (element2) 是否占用了 100% 的视口 -- 不确定是否可以这样做
2. 如果 (element2) 占据了 100% 的视口 == true，则将 (leftarrow) 的 href 更改为 (element1) -- 我假设您可以使用某种 innerHTML 来做到这一点
3. 如果 (element2) 占据了 100% 的视口 == true，则将 (rightarrow) 的 href 更改为 (element3)

我有点不知所措。有人可以指出我正确的方向吗？或者让我知道这种方法是否可行？任何帮助，将不胜感激！ :-)

编辑：更新了一些代码

这是我目前使用侧向箭头（某种）功能的方式：

$('.sidearrowleft').click(function () {
    $.scrollTo('#img1', 800);
});

$('.sidearrowright').click(function () {
    $.scrollTo('#img2', 800);
});

我正在使用 Ariel Flesler 的 scrollTO 插件转到包含图像的 div。

所以现在它只适用于两个图像，但我需要一些方法来为箭头设置一个值，具体取决于窗口当前所在的图像，这样我就可以让它不仅仅适用于两个图像，如果是这样的话清除。

Answer 1

在变量中跟踪当前显示的图像将为您节省很多精力。

类似：var currentImage = 1;。然后，当您单击下一个箭头时，滚动到图像 2 并增加 currentImage 的值，并对上一个箭头执行相反的操作（您决定第一个左侧的图像是否是最后一个在集合中，或者当您在第一张图像上时，您将禁用前一个箭头（当然，当您在最后一个图像上时，下一个箭头）。

真的没有必要用所有的计算代码来折磨自己（和浏览器），因为你可以很容易地在变量中获得一些东西。

更新

所以我会这样做：

var currentImage = 1; // default value, the first image is shown

$('.sidearrowleft').click(function () {
    if (currentImage == 1)
        return; // prevent the scroll when you're on the first image
    currentImage--; // decrement the value
    $.scrollTo('#img' + currentImage, 800);
});

$('.sidearrowright').click(function () {
    if (currentImage == totalImages) // totalImages is a variable containing the total number of images
        return; // prevent the scroll when you're on the last image
    currentImage++; // increment the value
    $.scrollTo('#img' + currentImage, 800);
});