如何在scroll上创建强制滚动到网站上的锚点
如何在scroll上创建强制滚动到网站上的锚点
提问于 2019-02-20 18:43:10
我有一个网站，在那里我有100vh的每个部分，所以它完美地填满了屏幕的高度。我想要实现的下一步是禁用常规滚动，并在滚动时强制屏幕平滑地跳到下一个100vh部分的顶部。以下是此动画/功能的示例：
我很难找到这个问题的答案，因为大多数事情只是在点击锚点时处理平滑滚动，而不是在用户向上/向下滚动时强制div重新定位。
我只想知道我需要什么代码来做这件事...
谢谢，我已经使用堆栈溢出有一段时间了，但是第一篇文章，如果有什么我可以做的让这件事更清楚的话，请告诉我。
回答 1
Stack Overflow用户
发布于 2019-02-21 15:05:33
免责声明：这个解决方案需要一些测试，可能还需要一些改进，但对我来说是可行的
如果你不想使用插件，而更喜欢普通的JavaScript解决方案，我在下面的代码中拼凑了一个小例子，如何使用JS特性来实现这一点：
https://codepen.io/lehnerchristian/pen/QYPBbX
但主要部分是：
function(e) {
console.log(e);
const delta = e.deltaY;
// check which direction we should scroll
if (delta > 0 && currentlyVisible.nextElementSibling) {
// scroll downwards
currentlyVisible = currentlyVisible.nextElementSibling;
} else if (delta < 0 && currentlyVisible.previousElementSibling) {
// scroll upwards
currentlyVisible = currentlyVisible.previousElementSibling;
} else {
return false;
}
// perform scroll
currentlyVisible.scrollIntoView({ behavior: 'smooth' });
e.preventDefault();
e.stopPropagation();
}它所做的是侦听轮子事件，然后调用回调，该回调将截获scroll事件。在回调中，确定方向，然后调用Element.scrollIntoView()让浏览器执行实际的滚动操作
如果您要使用此解决方案，请查看https://caniuse.com/#search=scrollintoview以获得浏览器支持
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54784389
复制相关文章
相似问题
腾讯云开发者
