javascript 水平滚动，检测相对于锚点的滚动位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5244976/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
horizontal scroll, detecting scroll position relative to anchors
提问by Derek Organ
Ok, I'm building a horizontal scroll website for a photographer. We have some really nice wireframes done and I'm looking to create a neat effect where it highlights the specific photo that is on the left of the screen at all times or more specifically set the transparency to 40% on all other photos.
好的，我正在为摄影师建立一个水平滚动网站。我们已经完成了一些非常漂亮的线框，我希望创建一个简洁的效果，它始终突出显示屏幕左侧的特定照片，或者更具体地说，将所有其他照片的透明度设置为 40%。
So I know I can add anchors to each photo so I can use that to have a click to next option but what if the user uses the scroll bar manually, is there any way for me to detect the position relative to the each photo. Bare in mind to make this even more awkward even though each photo is the same hight they can have different widths.
所以我知道我可以为每张照片添加锚点，这样我就可以使用它来点击下一个选项，但是如果用户手动使用滚动条，我有什么方法可以检测相对于每张照片的位置。请记住，即使每张照片的高度相同，它们也可以具有不同的宽度，但要使这更加尴尬。
I'm thinking if there was a way to get the position of each anchor tag then I could detect the current position against it and use some maths to figure out which one is in focus.
我在想是否有办法获得每个锚标签的位置，然后我可以检测它的当前位置并使用一些数学运算来确定哪个是焦点。
So can someone tell me if this is possible and if so how? Any other ideas to make it work are welcome of course.
那么有人可以告诉我这是否可能，如果可能，如何？当然，欢迎任何其他想法让它发挥作用。
采纳答案by Tokimon
I fiddled a bit around with a script for this, and came up with a script where the items opacity is dertermined, from how far from the left side they are. so the closer the item is the more visible it becomes.
我为此摆弄了一个脚本，并想出了一个脚本，其中确定项目的不透明度，距离它们离左侧多远。所以项目越接近它就越明显。
You can see the demo here: http://jsfiddle.net/XAa3Y/57/
你可以在这里看到演示：http: //jsfiddle.net/XAa3Y/57/
Hope it helps.
希望能帮助到你。
回答by marcosfromero
回答by Radagast the Brown
you'll have to synthesize two figures.
你必须合成两个数字。
a - you can find the position of the scroll using
a - 您可以使用找到滚动的位置
oDiv.scrollLeft
b - once pictures are loaded - you can sum the sizes of the pictures (or if you set it mannually - you don't even have to wait for them to load.
b - 加载图片后 - 您可以对图片的大小求和（或者如果您手动设置它 - 您甚至不必等待它们加载。
oImg.style.width
Assuming you give the same spacing between the pictures - the math becomes obvious.
假设您在图片之间给出相同的间距 - 数学变得显而易见。
It's a little JavaScript, that's all :)
这是一点点 JavaScript，仅此而已 :)
回答by Lee
How about something like this: http://jsfiddle.net/coltrane/Mj6ce/
这样的事情怎么样：http: //jsfiddle.net/coltrane/Mj6ce/
In that example, I've used jQuery -- just because it helps a lot with cross-browser compatibility -- but you could easily re-build it without jQuery if that's what you need.
在那个例子中，我使用了 jQuery —— 只是因为它在跨浏览器兼容性方面有很大帮助 —— 但是如果你需要的话，你可以在没有 jQuery 的情况下轻松地重新构建它。
The basic idea is this:
基本思想是这样的：
- The scroller div provides the scrolling (via
overflow-x: auto;), and it has a single immediate child div that holds all the other content items. - The jQuery function
offset()is used to compare the left edge of the scroller to the left edge of the content div (using document coordinates). This tells us how much the scroller is scrolled. - We can then loop through all the items in order, and examine each item's position within the content div (using jQuery's
position()function). Comparing an item's position to the current scroll value (from step 2) allows us to determine whether to highlight the item or not. - Finally, we use the scroll event, to trigger an update every time the scroll changes. Our update function simply applies steps 2 & 3 described above. I used jQuery's
.scroll()functionto bind the scroll event.
- 滚动条 div 提供滚动（通过
overflow-x: auto;），它有一个直接子 div 来保存所有其他内容项。 - 的jQuery函数
offset()用于（使用文档坐标）滚动条的左侧边缘比较内容div的左边缘。这告诉我们滚动条滚动了多少。 - 然后我们可以按顺序遍历所有项目，并检查每个项目在内容 div 中的位置（使用jQuery 的
position()函数）。将项目的位置与当前滚动值（来自第 2 步）进行比较，我们可以确定是否突出显示该项目。 - 最后，我们使用滚动事件，在每次滚动更改时触发更新。我们的更新功能只是应用上述步骤 2 和 3。我使用jQuery 的
.scroll()函数来绑定滚动事件。
回答by Hussein
The task involves detecting Image position, scroller position, and knowing your images width. With jQuery you'll need to use scrollLeft(), position(), width(), and the scroll()event
该任务涉及检测图像位置、滚动条位置和了解图像宽度。使用 jQuery，您需要使用scrollLeft()、position()、width()和scroll()事件
Here's how you do it.
这是你如何做到的。
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'
})
}
});
})
Check example at http://jsfiddle.net/Vy33z/4/
在http://jsfiddle.net/Vy33z/4/检查示例
回答by Dominic
Try using jQuery's scrollevent support.
尝试使用 jQuery 的scroll事件支持。
And have that check to see what image is on the screen - something similar to this:
并进行检查以查看屏幕上的图像 - 类似于以下内容：
