水平滚动，检测滚动位置与锚点的相对关系

Question

好的，我正在为一位摄影师建立一个水平滚动网站。我们已经完成了一些非常漂亮的线框图，并且我希望创建一个很棒的效果，使左侧屏幕上的特定照片始终处于突出显示状态，或更具体地说，将所有其他照片的透明度设置为40％。

因此，我知道我可以为每个照片添加锚点，以便我可以使用它来进行下一个选项的单击，但是如果用户手动使用滚动条，是否有任何方法可以检测相对于每个照片的位置。请记住，即使每张照片的高度相同，它们的宽度也可能不同，使这种情况变得更加尴尬。

我认为，如果有一种方法可以获取每个锚点标记的位置，那么我就可以检测当前位置并使用一些数学方法来确定哪一个处于焦点状态。

所以，有人能告诉我这是否可能，如果可能，该怎么做？当然，欢迎任何其他想法来使其工作。

- Derek Organ

---

我可以使用jQuery。根据下面的一些答案，我刚刚意识到一件事情。我基本上想要识别第一个完全可见的div（图像）块并将其突出显示。因此，根据屏幕线框图，可能有3个块完全可见，但我只想突出显示第一个块。当用户向右滚动一点时，第一个块不再“完全可见”，因此第二个块是第一个完全可见的块，应该被突出显示。 - Derek Organ

不确定您是否仍需要，但我有一个插件可能会有所帮助：https://github.com/Mottie/visualNav...请查看演示：http://mottie.github.com/visualNav/index2.html - Mottie

我还在开发中，但这是我目前所拥有的。http://deeorgan.orchestra.io/ - Derek Organ

Answer 1

我稍微调整了一下这个脚本，并创作出一个能够根据离左边的距离来决定物品透明度的脚本，所以越靠近左边的物品就会变得越清晰可见。

你可以在这里查看演示： http://jsfiddle.net/XAa3Y/57/ 希望对你有所帮助。

- Tokimon

---

非常酷。我可能会做一个小改变，加入一个容差级别。例如，如果它在90%或更高的位置，它将显示100%的不透明度。如果你知道我的意思。我不想让寻找完美的100%不透明度变得棘手。 - Derek Organ

这取决于你。但是图像的不透明度始终至少为20％，因为这是标准。因此，它的不透明度范围从20％到100％。 - Tokimon

Answer 2

你可以修改（或更好地改进）waypoints，加入对水平滚动的支持。 根据我所看到的，这并不太难。

- marcosfromero

Answer 3

您需要合成两个图形。

a- 您可以使用以下方法查找滚动条的位置：

 oDiv.scrollLeft

b - 一旦图片加载完毕 - 您可以计算图片的大小（或者如果您手动设置它 - 您甚至不必等待它们加载。

oImg.style.width

假设您在图片之间设置了相同的间距 - 数学问题就显而易见了。

这只是一点JavaScript :)

- Radagast the Brown

Answer 4

该任务涉及检测图像位置、滚动条位置和了解图像宽度。使用 jQuery，您需要使用 scrollLeft(), position(), width(), 以及 scroll() 事件。

以下是如何完成它的方法。

var $div = $('div'),
    divleft = $div.position().left;
$('div').scroll(function() {
    $('img').each(function() {
        img = $(this);
        imgleft = img.position().left;
        if (imgleft > divleft && imgleft + img.width() < divleft + $div.width()) {
            $(this).css({
                opacity: '1'
            })
        } else {
            $(this).css({
                opacity: '0.2'
            })
        }
    });
})

请查看示例http://jsfiddle.net/Vy33z/4/

- Hussein

---

我使用两个更改分叉了你的fiddle：1. >=和<=（当滚动到第一个左侧img时存在边界问题）。2.在HTML中手动添加了第一个img的不透明度，因此它会自动突出显示（如果没有，则在滚动后立即突出显示）。http://jsfiddle.net/marcosfromero/FcgbC/ - marcosfromero

Answer 5

这样怎么样：http://jsfiddle.net/coltrane/Mj6ce/

在这个例子中，我使用了jQuery——因为它可以很好地处理跨浏览器兼容性问题——但是如果你需要的话，你也可以轻松地重新构建它而不使用jQuery。

基本思路是这样的：

1. 滚动条div通过overflow-x: auto;提供滚动功能，并且它有一个单一的立即子div，其中包含所有其他内容项。
2. jQuery函数offset()用于比较滚动条的左边缘与内容div的左边缘（使用文档坐标）。这告诉我们滚动条滚动了多少。
3. 然后，我们可以按顺序循环遍历所有项目，并检查每个项目在内容div中的位置（使用jQuery的position()函数）。将项目的位置与步骤2中的当前滚动值进行比较，以确定是否突出显示该项目。
4. 最后，我们使用滚动事件来触发每次滚动更改时的更新。我们的更新函数只需应用上述步骤2和3。我使用jQuery的.scroll()函数绑定滚动事件。

- Lee

Answer 6

尝试使用jQuery的scroll事件支持。

http://api.jquery.com/scroll/

并检查屏幕上显示的图像 - 类似于这样：

滚动后检查元素是否可见

- Dominic