Question

我有一个站点，每个部分的速度为100vh，因此它完全适合屏幕的高度。我要实现的下一步是禁用常规滚动，并在滚动时强制屏幕平滑跳转到下一个100vh部分的顶部。这是此动画/功能的示例：

https://www.quay.com.au/

我很难找到任何答案，因为大多数事情都只是在单击锚点时进行平滑滚动，而实际上并没有在用户向上/向下滚动时强制div重新定位。

我只是想知道执行此操作需要什么代码...

谢谢，使用堆栈溢出已有一段时间了，但是在第一篇文章中，让我知道我是否可以做些什么使之更加清楚。

Answer 1

免责声明：此解决方案需要一些测试，可能还需要进行一些改进，但对我有用。

如果您不想使用插件，而是希望使用普通的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();
}

它的作用是侦听wheel事件，然后调用回调，从而拦截滚动事件。在回调中确定方向，然后调用Element.scrollIntoView()来让浏览器进行实际滚动

如果要使用此解决方案，请检查https://caniuse.com/#search=scrollintoview以获得浏览器支持

如何在滚动网站上创建强制滚动以锚定网站

1 个答案: