Javascript 当图像进入窗口视口时，如何设置顶部：0（偏移：0）？

我想设置top:0（偏移量：0）当图像以单次滚动的方式进入视口时（就像在每个单次滚动时，下一个图像设置为图像位置的top 0或图像的偏移量0），在完成滚动所有图像后，继续滚动页面。有人知道这是什么JavaScript代码吗

这里是试用链接

.主分区{
框大小：边框框；
}
.粘性div{
位置：粘性；
排名：0；
高度：100vh；
}    
如果（$（窗口）.width（）>=1024）{
（函数（$）{
var selector=“.home产品滑块.产品项”；
变量$slides=$（选择器）；
var currentSlide=0；
var isAnimating=假；
var stopAnimation=函数（）{
setTimeout（函数（）{
isAnimating=假；
}, );
};
var bottomIsReached=函数（$elem）{
var rect=$elem[0]。getBoundingClientRect（）；
返回rect.bottom=0；
};
document.addEventListener(
“轮子”，
功能（事件）{
变量$currentSlide=$（$slides[currentSlide]）；
如果（正在进行模拟）{
event.preventDefault（）；
回来
}
var direction=-event.deltaY；
如果（方向<0）{
//下一个
如果（currentSlide+1>=$slides.length）返回；
如果（！bottomIsReached（$currentSlide））返回；
event.preventDefault（）；
currentSlide++；
var$slide=$（$slides[currentSlide]）；
var offsetTop=$slide.offset（）.top；
isAnimating=假；
$（“html，body”）.animate(
{
scrollTop:offsetTop，
行为：“平滑”
},
停止动画
);
}否则{
//背
如果（当前幻灯片-1<0）返回；
如果（！topIsReached（$currentSlide））返回；
event.preventDefault（）；
当前幻灯片--；
var$slide=$（$slides[currentSlide]）；
var offsetTop=$slide.offset（）.top；
isAnimating=假；
$（“html，body”）.animate(
{
//滚动顶：偏置
},
停止动画
);
}
{被动：false}
},
);
})（jQuery）；
//主页滑块脚本到此结束
}

您正在寻找滚动捕捉。在控制滚动的容器上设置规则。在这里，您说应该在

y

轴上进行捕捉，并且应该毫无例外地执行捕捉

在要捕捉的图元上，使用属性。将其设置为

start

，表示滚动到视图中的元素的开头应位于捕捉网格上

一定要小心，

position:sticky

和滚动抓拍的组合可能会导致Safari iOS上出现错误行为

html，
身体{
保证金：0；
溢出：隐藏；
}
.主分区{
框大小：边框框；
宽度：1000px；
高度：100vh；
最大宽度：100%；
溢出y：自动；
滚动捕捉类型：y必填；
}
.粘性div{
位置：粘性；
顶部：0px；
宽度：100%；
最大高度：100%；
高度：750px；
滚动捕捉对齐：开始；
}
img{
宽度：100%；
身高：100%；
对象匹配：覆盖；
}

请显示迄今为止您自己尝试过的Javascript和/或jquery代码。我在这里编辑我的问题并添加jquery我尝试设置偏移量的内容：0，但它不起作用。是的，它工作正常，但在2 3鼠标滚轮滚动后图像设置偏移量为0，但我希望每个图像在单个滚动时偏移量为0，现在，在多次滚动后设置图像偏移量：0或顶部：0。你知道如何为每个图像设置单卷轴上的偏移量0吗？而不是当图像自然出现在顶部时@Emiel ZuurbierAh，我一开始不理解你的问题，但可以肯定。可以通过滚动捕捉来实现这一点。签出上面编辑的答案。不过，您确实需要更改滚动的元素。

<div class="main-div">
 <div class="sticky-div">
   <img src="https://images.unsplash.com/photo-1601140958046-ce3c75269438?ixlib=rb- 
   1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2134&q=80" />
 </div>
 <div class="sticky-div">
   <img src="https://images.unsplash.com/photo-1559642147-97be7782c7b3?ixlib=rb- 
   1.2.1&auto=format&fit=crop&w=700&q=80">
</div>
<div class="sticky-div">
  <img src="https://images.unsplash.com/photo-1527435292159-ba44021581fa?ixlib=rb- 
  1.2.1&auto=format&fit=crop&w=634&q=80">
</div>
</div>

.main-div {
   box-sizing: border-box;
}

.sticky-div {
   position: sticky;
   top:0;
    height:100vh;
}    


if($(window).width() >= 1024){

(function($) {
var selector = ".home-product-slider .product-item";

var $slides = $(selector);

var currentSlide = 0;
var isAnimating = false;

var stopAnimation = function() {
  setTimeout(function() {
    isAnimating = false;
  }, );
};

var bottomIsReached = function($elem) {
  var rect = $elem[0].getBoundingClientRect();
  return rect.bottom <= $(window).height();
};

var topIsReached = function($elem) {
  var rect = $elem[0].getBoundingClientRect();
  return rect.top >= 0;
};

document.addEventListener(
  "wheel",
  function(event) {
    var $currentSlide = $($slides[currentSlide]);

    if (isAnimating) {
      event.preventDefault();
      return;
    }

    var direction = -event.deltaY;

    if (direction < 0) {
      // next
      if (currentSlide + 1 >= $slides.length) return;
      if (!bottomIsReached($currentSlide)) return;
      event.preventDefault();
      currentSlide++;
      var $slide = $($slides[currentSlide]);
      var offsetTop = $slide.offset().top;
      isAnimating = false;
      $("html, body").animate(
        {
          scrollTop: offsetTop,
          behavior: 'smooth' 

        },
        stopAnimation
      );
    } else {
      // back
      if (currentSlide - 1 < 0) return;
      if (!topIsReached($currentSlide)) return;
      event.preventDefault();
      currentSlide--;
      var $slide = $($slides[currentSlide]);
      var offsetTop = $slide.offset().top;
      isAnimating = false;
      $("html, body").animate(
        {
    //             scrollTop: offsetTop
        },
        stopAnimation
      );
    }
    { passive: false }
   },

  );
 })(jQuery);
    //home page slider script end here

  }