【发布时间】：2022-10-25 06:16:53
【问题描述】：
所以假设我有一个这样的滑块。
（蓝色矩形是我的屏幕，红线是屏幕中间，指示我们在哪张幻灯片中。）
我们可以通过使用鼠标板/触控板自由滚动来导航滑块。
当红线到达幻灯片的左侧（绿色矩形）时，表示我们到达了下一张幻灯片。
（这里我们到达幻灯片 2）
因此，在滚动时，我需要知道当我们实际到达下一张幻灯片时使用动态函数/方程。 （因为幻灯片的宽度，幻灯片的数量可以改变）
我试过：（当前位置（px））/（幻灯片宽度+间隙（px）） 但是我在每张幻灯片的中间而不是在幻灯片的左侧都有一个阈值。
因此，如果有人提出计算建议/想法，我会很高兴我应该能够在滚动时检测当前索引。
（所以我可以通知用户他正在看哪张幻灯片）。
【问题讨论】：
-
我会计算从每张幻灯片的水平中心到屏幕中心的距离。最小的胜利
-
我不确定可能的最佳解决方案，但您可以查看Intersection Observer AP，它可以替代进行 screenWidth * 0.5... 计算。另外我很确定它应该是可能的（也许不是很优雅的解决方案）但是你可以将不可见的元素放在中间并检查它什么时候会用 js 将下一个项目悬停在你的滑块中
-
@ITgoldman 哦，是的，它应该这样工作！我会尽力
-
@JSEvgeny 抱歉，我忘了提到我使用的是 webgl 而不是 dom 元素。所以很遗憾我不能使用这些 API
-
我忘了回复，但它有效@ITgoldman
标签： javascript html scroll slider interactive