javascript - 如何让元素在视口(viewport)中可见？查询

Question

我在页面上有一个图像列表。当我滚动页面时，我想在视口(viewport)中当前图像的导航栏中显示一些选项。因此我需要获取当前在视口(viewport)中的图像元素，这可能吗？

雅各布

Answer 1

谁说视口(viewport)中只有一张图片？人多的时候你想做什么？

但除此之外，您始终可以获得包含图像的容器的滚动位置以及图像的顶部偏移量，以查看当前在 View 中的图像。

所以这些值会让你得到你的结果

• 容器滚动位置
• 容器可见客户端高度
• 图像的顶部偏移

使用这些值可以定位 View 中的所有图像，无论它们是完全显示还是部分显示(在顶部或底部)。

这是一个简化的 JSFiddle在第一个全 View 图像周围给出红色边框。代码是这样做的:

// get top positions and references to all images
var pos = $("img").map(function(){
  var $this = $(this);
  return {
    el: $this,
    top: $this.offset().top
  };
}).get();

// provide document scrolling
$(document).on("scroll", function() {

  $("img").removeClass("first-in-view");

  var scroll = $(this).scrollTop();
  var i = 0;
  while(pos[i].top < scroll) i++;

  pos[i].el.addClass("first-in-view");

}).scroll();

这应该优化为仅在需要时切换类。否则我们在每个卷轴中都会闪烁。但它演示了如何做到这一点，您可以从这里开始。

重要

在 document load 事件上附加图像位置确定过程非常重要，而不是通常使用的 DOM 就绪，因为您必须等待文档加载才能让图像加载有最终立场。