4

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

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

有什么建议可以如何实现？

4

5 回答 5

4

用于此的 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>
于 2013-11-07T20:08:58.617 回答
3

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

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

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

于 2017-06-27T16:23:36.630 回答
1

如果您想考虑跨浏览器 javascript 重新实现原生 CSS Scroll Snap规范，这里已经回答：如何在 Chrome 中模拟 CSS Scroll Snap Points？，你可以使用 这个库：

使用它而不是原生 css 解决方案的主要原因是它适用于所有现代浏览器，并且具有可自定义的配置，以允许在转换和滚动检测中自定义时间。

该库使用 vanilla javascript 缓动函数重新实现 css 捕捉功能，并使用容器元素的scrollTop/scrollLeft属性和滚动事件侦听器的值工作

这是一个显示如何使用它的示例：

import createScrollSnap from 'scroll-snap'

const element = document.getElementById('container')

const { bind, unbind } = createScrollSnap(element, {
  snapDestinationX: '0%',
  snapDestinationY: '90%',
  timeout: 100,
  duration: 300,
  threshold: 0.2,
  snapStop: false,
  easing: easeInOutQuad,
}, () => console.log('snapped'))

// remove the listener 
// unbind();

// re-instantiate the listener 
// bind();
于 2018-02-09T09:01:06.797 回答
0

使用简单的怎么样scrollTo？使用纯 Javascript 和 CSS，没有框架或库。

这里有两个例子，一个用于垂直滚动，另一个用于水平滚动：

最好
的 Unkn0wn0x

于 2020-11-29T12:48:49.853 回答
-1

您可以使用 javascript 来执行此操作，或者对于稍微简单和较旧的解决方案，您可以使用页面锚点。如果您将 document.location.hash 更改为页面中存在的锚点，则浏览器将滚动到它。因此，在您的 HTML 中，在页面中放置一些锚点：

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

然后在你的js中放：

document.location.hash = "anchor1";
于 2012-12-07T05:30:18.763 回答