Javascript 将页面内容滚动到鼠标滚动的自定义位置

我想滚动鼠标滚动页面内容。 我在页面中有5个图像，每次我想在每个屏幕上显示一个图像。 若我向下滚动显示第二个图像，若我向上滚动显示前一个图像。直到最后一张图片，我都试过一个例子，但不知道如何做到这一点

JavaScript:

var winHeight = $(window).height();
var prevHeight = 0;
var scrollCount = 0;
var docHeight = $(document).height();

$(document).ready(function(){

  $(window).scroll(function(e){
    console.log("in scroll top");
    var top = $(window).scrollTop();
    console.log("top - "+top);
    if(top !=0 && top != docHeight){
      if(top > prevHeight){
        scrollCount = scrollCount+1;
      }else{
        scrollCount = scrollCount-1;
      }
      console.log("scroll count="+scrollCount);
      $(window).scrollTop(winHeight*scrollCount);
      prevHeight = top;
      if(scrollCount < 0){
        scrollCount = 0;
      }
      e.preventDefault();
    } 
  });

var winHeight=$（window.height（）；
var-prevHeight=0；
var scrollCount=0；
var docHeight=$（document）.height（）；
$（文档）.ready（函数（）{
$（窗口）。滚动（功能（e）{
console.log（“在滚动顶部”）；
var top=$（window.scrollTop（）；
控制台日志（“顶部-”+顶部）；
if（top！=0&&top！=8）{
如果（顶部>顶部高度）{
scrollCount=scrollCount+1；
}否则{
scrollCount=scrollCount-1；
}
console.log（“滚动计数=”+滚动计数）；
$（窗口）.scrollTop（winHeight*scrollCount）；
高度=顶部；
如果（滚动计数<0）{
滚动计数=0；
}
e、 预防默认值（）；
} 
});

---

我的例子是

只需将CSS中每个图像的边距设置为您希望的边距。或者解决方法是在HTML中添加一堆“p”标记，而不实际添加段落，第一种方法是最好的。您可能还需要一些JavaScript来调整大小