水平滾動後jQuery捕捉

Question

我有一個使用mousewheel jQuery插件的水平滾動網站。滾動工作，但我想將每個「文章」捕捉到文檔的左側，以便一旦停止滾動時它不會保持中途切斷。

的標記我到目前爲止有：

CSS

#viewport { 
width:100%; 
height:100%; 
overflow: hidden; 
} 

#stage { 
height:100%; 
width:400%; 
position: absolute; 
display:block; 
overflow: hidden; 
} 

#stage article { 
width:25%; 
height:100%; 
position: relative; 
display:block; 
float:left; 
} 

HTML

<div id="viewport"> 
<section id="stage" class="clearfix"> 
<article> 
This is the block that should snap to the left once scrolling is stopped. 
</article> 

<article> 
This is the block that should snap to the left once scrolling is stopped. 
</article> 

<article> 
This is the block that should snap to the left once scrolling is stopped. 
</article> 

<article> 
This is the block that should snap to the left once scrolling is stopped. 
</article> 

</section> 
</div> 

JQUERY

$(function() { 
$("html, body").mousewheel(function(event, delta) { 
this.scrollLeft -= (delta * 30); 
event.preventDefault(); 
}); 
}); 

我嘗試使用這個腳本不會有好結果。看起來百分比阻止瞭解前一個/下一個位置。

https://stackoverflow.com/a/8170667

在此先感謝。

Answer 1

我不知道你上一個/下一個位置是什麼意思。

但是，您可以在每次滾動結束時檢查屏幕左側是否在最近的文章。如果沒有，向上滾動一點。

也許就像......

$(function() { 
    $("html, body").mousewheel(function(event, delta) { 

     var theBody = $('body'); 
     theBody.scrollLeft(this.scollLeft() - delta * 30); 

     /* Snap how close, how many articles, and what direction is the scroll? */ 
     var tolerance = 10; 
     var numberOfArticles = 4; 
     var signDelta = number?number<0?-1:1:0; 

     /* While you're not within an acceptable tolerance, get a little closer */ 
     while (!((theBody.scollLeft()%(theBody.width()/numberOfArticles)) > tolerance)) 
     { 
      theBody.scrollLeft(theBody.scollLeft() - signDelta * 1); 
     } 

     event.preventDefault(); 
    }); 
});