Take the 2-minute tour ×

I want scroll page content on mouse scroll. I have 5 images in page, at a time i want to show one image per screen. If i scroll down second image showed be shown, if i scroll up previous image should be shown. Like wise until the last image.I have tried an example but have no idea how achieve this.


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


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

My example is here http://jsbin.com/iwOsiFIY/1/

share|improve this question
add comment

1 Answer

Just set the margins to what you want them to be for each image in CSS. Or a workaround is adding a bunch of "p" tags in HTML without actually adding a paragraph, The first way is the best. You might also need some JavaScript for resizing.

share|improve this answer
add comment

Your Answer


