마우스 스크롤시 사용자 정의 위치로 페이지 컨텐츠 스크롤

Question

마우스 스크롤시 스크롤 페이지 컨텐츠를 원합니다. 페이지 당 5 개의 이미지가 있습니다. 한 번에 하나의 이미지를 한 화면에 표시하려고합니다. 아래로 스크롤하면 두 번째 이미지가 표시되는 것으로 나타났습니다. 위로 스크롤하면 이전 이미지가 표시되어야합니다. 마지막 이미지까지 현명한 것 같습니다. 예제를 시도했지만 어떻게 달성했는지 전혀 모릅니다.

자바 스크립트 :이

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가 필요할 수도 있습니다.