將頁面內容滾動到鼠標滾動上的自定義位置

我希望滾動鼠標滾動頁面內容。我有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/

來源

2013-12-13 Ramesh Paul

只需設置頁邊距，你希望他們在CSS每個圖像內容。或者一個解決方法是在HTML中添加一堆「p」標籤而不實際添加段落，第一種方法是最好的。您可能還需要一些JavaScript來調整大小。

來源

2013-12-13 15:08:04 Idris

將頁面內容滾動到鼠標滾動上的自定義位置

回答

相關問題