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

Question

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

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

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

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

我试图对这需要什么进行表述，例如:

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

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

编辑:更新了一些代码

这是我目前如何使用(某种)功能的侧箭头:

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

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

我正在使用 scrollTO来自 Ariel Flesler 的插件，用于转到包含图像的我的 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);
});