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

Question

我有一个基本上是四个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

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

又见How to emulate CSS Scroll Snap Points in Chrome?

Answer 2

您可以使用javascript来做到这一点，也可以使用稍微简单一些的旧解决方案，您可以使用页面锚点。 如果您将document.location.hash更改为页面中存在的锚点，则浏览器将滚动到该锚点。 所以在你的HTML把一些锚页面：

<a name="anchor1" id="anchor1"></a> 

然后在您的JS放：

document.location.hash = "anchor1"; 

Answer 3

jQuery的scrollsnap此插件支持到IE9。

你在找什么叫做“Scroll Snap”。

<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> 

Answer 4

如果你要考虑一个跨浏览器的JavaScript重新实现本地CSS 滚动捕捉 SP的EC，因为已经回答了这里：How to emulate CSS Scroll Snap Points in Chrome?，你可以使用 this library：

主要理由使用，而不是本机的CSS解决方案，它适用于所有现代浏览器，并有一个可定制配置，以允许自定义定时在转换和滚动检测。

库重新实现的CSS卡扣特征使用香草的javascript缓和功能，并适用于使用的容器元素的scrollTop/scrollLeft属性的值和所述滚动事件监听器

这里是示出了如何一个例子使用它：

import ScrollSnap from 'scroll-snap' 

const snapConfig = { 
    scrollSnapDestination: '90% 0%', // scroll-snap-destination css property, as defined here: https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-destination 
    scrollTimeout: 100, // time in ms after which scrolling is considered finished 
    scrollTime: 300 // time in ms for the smooth snap 
} 

function callback() { 
    console.log('called when snap animation ends') 
} 

const element = document.getElementById('container') 
const snapObject = new ScrollSnap(element, snapConfig) 

snapObject.bind(callback) 

// unbind the element 
// snapObject.unbind();