我怎样才能使元素在视口中可见?jQuery

How can I get the element visible in the viewport? jQuery

本文关键字：视口 jQuery 元素      更新时间：2023-09-26

我有一个页面上的图像列表。当我滚动页面时，我想在当前视口中的图像的导航栏中显示一些选项。因此，我需要得到图像元素目前在视口，这是可能的吗?

Jakob

谁说在视口中只有一个图像?当有很多人的时候，你想做什么?

但除此之外，你总是可以得到你的图像容器的滚动位置以及你的图像的顶部偏移量，看看哪个是当前在视图

这些值将会得到你的结果

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

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

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

// 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();

应该优化为只在需要时切换class。否则我们在每个卷轴上都有闪烁。但它展示了如何做到这一点，你可以从这里开始。

重要

将图像位置确定过程附加在文档加载事件上，而不是通常使用DOM ready，这是非常重要的，因为您必须等待文档加载才能使图像具有最终位置。

相关文章：