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

Question

我想在鼠标滚动时滚动页面内容。 我的页面上有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();
    } 
  });

我的示例在这里http://jsbin.com/iwOsiFIY/1/

Answer 1

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