如何用纯 JavaScript 构建垂直轮播滚动条？

Question

这就是我想要实现的目标

代码已经在这里，但我不知道如何让它在每个部分停止。 https://codepen.io/ellie_html/full/dyYjZyB

使上面的代码起作用的 css 部分是这样的

.container {
    height:570px;
    width: 325px;
   
    overflow-y: scroll;

    scroll-snap-type: mandatory;
    scroll-snap-points-y: repeat(3rem);
    scroll-snap-type: y mandatory;
    position: relative;
    left: 510px;
    top: 50px;
    z-index: 1;
    border-radius: 15px;
    border: none;
}

.tiktok {
    height: 620px;
    width:300px;
    background-color: black;
    scroll-snap-align: start;
}

垂直轮播滚动器就像上面一样，不同之处在于，它必须停在每个部分上，而不是允许用户快速滚动每个部分。

我注意到如果向下滚动，Google Shorts https://www.youtube.com/shorts/3jqhfmUqgZk的行为方式相同。

给人一种活泼、清脆的感觉。然而，它也不允许它在每个部分停止。如果用户滚动速度非常快，它会跳过很多。

这如何在 JavaScript 中完成？到目前为止，我已经看过很多库，但它们都遇到了同样的问题。我正在尝试修改上面的代码以使其工作。

或者我正在重新创建轮子并且那里有一些小代码已经做到了这一点？

Answer 1

你有没有尝试过fullpage.js？您可以在此处查看其官方文档。

fullPage是一个根据GPLv3 许可证授权的开源应用程序。该许可证允许您在开源项目中使用 fullPage，但它要求您的项目是公开的、提供归属并根据 GPLv3 获得许可。

这是一个人为的示例，也可以在 CodePen 上找到：

new fullpage('#fullpage', {
  sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
  // get your license at https://alvarotrigo.com/fullPage/pricing/
  licenseKey: 'YOUR LICENSE KEY HERE '
});

.section {
  text-align:center;
  font-size: 3em;
}
.as-console-wrapper {
  display: none!important;
}

<link rel='stylesheet' href='https://unpkg.com/fullpage.js/dist/fullpage.min.css'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.11/fullpage.min.js"></script>

<div id="fullpage">
  <div class="section">Section 1</div>
  <div class="section">
    <div class="slide" data-anchor="slide1">Slide 2.1</div>
    <div class="slide" data-anchor="slide2">Slide 2.2</div>
  </div>
  <div class="section">Section 3</div>
  <div class="section">Section 4</div>
</div>