如何“捕捉”滚动到最近的预定义位置？

Question

我有一个网站，本质上是四个 div - 每个 div 都设置为窗口的高度，以便整个文档是窗口高度的四倍。

这个想法是，点击一个 div 将滚动推进一个“窗口高度”——效果很好，如下所示：

// on click event

if(cur_frame<number_slides){
   scrolling = true;
   $('html,body').animate({scrollTop:window_height*cur_frame},function(){
      scrolling=false;
   });
}

然而，在用户手动滚动页面后，我想将位置“捕捉”到最接近的窗口高度倍数 - 因此给定的 div 再次在屏幕上居中。我尝试使用超时，认为一个小的延迟可以防止它每秒触发一千次......

// on scroll event

clearTimeout(scroll_timer);
if(!scrolling) scroll_timer = setTimeout(function(){
   if(cur_scroll!=window_height*(cur_frame-1)) {
      scrolling = true;
      $('html,body').stop().animate({scrollTop:window_height*(cur_frame-1)},function(){
         scrolling = false;
      });
   }
},100); //20? 400? 1000?

...但无法在与用户争夺滚动位置的脚本或破坏“捕捉”效果的严重长时间延迟之间取得平衡。

有什么建议可以实现这一点吗？

Answer 1

有一个 CSS 规范，它很好地支持本机渲染和非常好的触摸行为（Chrome 除外）：http: //caniuse.com/#feat=css-snappoints

对于落后的浏览器，有一个polypill：https://github.com/ckrack/scrollsnap-polyfill

另请参阅如何在 Chrome 中模拟 CSS 滚动捕捉点？

Answer 2

jquery scrollsnap 插件支持 IE9。

您正在寻找的称为“滚动快照”。

<script src="demo/foundation/javascripts/jquery.js"></script>
<script src="src/jquery.event.special.js"></script>
<script src="src/jquery.easing.min.js"></script>
<script src="src/jquery.scrollsnap.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(document).scrollsnap({
        snaps: '.snap',
        proximity: 50
    });
});
</script>