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来调整大小。

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

1 个答案: