Javascript “我怎么能？”；snap"；滚动到最近的预定义位置？

我有一个网站，基本上是四个div-每个div都设置为窗口的高度，因此总文档是窗口高度的四倍

其思想是，单击div将滚动推进一个“窗口高度”——这很好，如下所示：

// on click event

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

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

---

对如何实现这一点有什么建议吗？

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

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

---

jquery scrollsnap插件支持IE9

您要查找的是“滚动快照”

$（文档）.ready（函数（）{
$（文档）.scrollsnap({
捕捉：'.snap'，
距离：50
});
});

这方面有一个CSS规范，它在本机渲染和非常好的触摸行为（Chrome除外）中得到了很好的支持：

对于落后的浏览器，有一个polypill：

---

也见

< P>如果您想考虑跨浏览器JavaScript重新实现原生CSS< Sturial>滚动快照< /强>规格，如这里已经回答的：可以使用 ：

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

该库使用普通javascript函数重新实现css捕捉功能，并使用容器元素的

scrollTop

/

scrollLeft

属性和滚动事件侦听器的值工作

下面是一个演示如何使用它的示例：

import ScrollSnap from 'scroll-snap'

const snapConfig = {
  // snap-destination for x and y axes expressed as px|%|vw|vh
  snapDestinationX: '0%',
  snapDestinationY: '90%',
  // time in ms after which scrolling is considered finished
  timeout: 100,
  // duration in ms for the smooth snap
  duration: 300,
  // threshold to reach before scrolling to next/prev element, expressed in the range [0, 1]
  threshold: 0.2,
  // custom easing function
  easing: easeInOutQuad,
}

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();

---

使用简单的

滚动到
怎么样？使用纯Javascript和CSS，没有框架或库

以下是两个示例，一个用于垂直滚动，另一个用于水平滚动：


垂直：
水平：

最佳

未知0Wn0x
一个问题。。。页面锚根本就没有“滚动”功能。页面锚的全部意义在于捕捉到一个位置！它确实有效，我在FF Chrome和IE中试用了它，然后发布了答案，只是为了确定。真不敢相信我竟然被否决了！我相信OP所要求的是“量化”效应。用户完成滚动后，浏览器将滚动位置平滑地“量化”到最近的滚动间隔。这就像是一个“网格捕捉”效应。哦，是的，我不敢相信我没有注意到。对不起，艾萨克。但你永远不会知道，有人可能会来到这个页面，寻找一种简单的方式在页面中导航，并发现答案很有用，所以我将把它留给后代。嘿，谢谢，2019年，它正在工作，不知道为什么这个答案会出现-2，我想他们不知道他们在说什么，我只是尝试了一下，它完成了工作：）似乎在chrome中坏了，无法向下滚动，只需跳回到top@Steve你在用什么配置？我无法复制这个问题（我使用的是Chrome 67），你在使用scroll on时也有同样的问题吗？在ubuntu 16.04上的Chrome 67-只尝试了演示页面。在Chrome67Windows10上似乎工作得很好。那些jQuery插件通常是用户体验的杀手。
document.location.hash = "anchor1";

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

import ScrollSnap from 'scroll-snap'

const snapConfig = {
  // snap-destination for x and y axes expressed as px|%|vw|vh
  snapDestinationX: '0%',
  snapDestinationY: '90%',
  // time in ms after which scrolling is considered finished
  timeout: 100,
  // duration in ms for the smooth snap
  duration: 300,
  // threshold to reach before scrolling to next/prev element, expressed in the range [0, 1]
  threshold: 0.2,
  // custom easing function
  easing: easeInOutQuad,
}

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();