HTML和CSS垂直滚动条指示器

Question

我正在尝试创建类似于该网站的垂直可滚动条和容器的内容：

基本上，我的网站上有几个div，我希望能够滚动它们。意思是，我想创建与垂直滚动条类似的东西，该滚动条指示我所在的部分，并在滚动时在部分之间创建过渡。

我已经尝试寻找一些东西，但是我不知道合适的术语，所以找不到我想要的东西。

我该如何实现？

我不是要输入代码，我只是想知道我应该研究并尝试的适当内容。

谢谢。

Answer 1

这称为固定的垂直导航栏或固定的侧边栏。

基本上，它只是一个简单的导航栏，但具有lib\ CSS规则，可将其强制放在侧面。然后，它使用宽度将其保持垂直，并在导航栏上将普通文本替换为圆点。最后，它通过使用带有元素ID的哈希将您自动滚动到要访问的页面的任何部分。

以下一些链接可帮助您开始创建自己的一个：

1. Codepen Example（替换带有中间点的“链接”文字）
2. W3Schools Example（同样，用中间点替换文本）
3. Treehouse Example（链接到许多其他想法的线程）

这是一个非常简单的例子：

right: 0

.left {
  position:fixed;
  top: 30%; left: 0;
  height:100%; width:50px; 
}

ul {
  list-style-type: none;
}

a {
  text-decoration: none;
}