垂直滚动和水平滚动_无限滚动的垂直菜单

垂直滚动和水平滚动

View demo 查看演示 Download Source 下载源

Note: from now on I’m planning to release simple “components” and explain their basic working principle in tiny articles. In this first one I’m going to look at the infinite looping scroll illusion.

注意：从现在开始，我打算发布简单的“组件”，并在小文章中解释它们的基本工作原理。 在第一个中，我将探讨无限循环滚动错觉。

A while back a came across a really nice menu on Madeleine Dalla’s incredible website that was infinitely scrollable. I wondered how that was achieved and after searching for existing solutions, I found this great demo by Vincent Orback on Codepen. It shows how to pull off that effect with sections on a page. I wanted to use his script to make it work for a menu.

前一阵子，在马德琳·达拉(Madeleine Dalla)令人难以置信的网站上遇到了一个非常不错的菜单，它可以无限滚动。 我想知道这是如何实现的，在寻找现有解决方案之后，我在Vincent Orback的Codepen上找到了这个出色的演示。 它显示了如何通过页面上的各个部分来实现这种效果。 我想使用他的脚本来使其适用于菜单。

The principle of how this works is not too complicated: there’s a bunch of menu items that we need to clone in order to make sure that we have enough items to create a scroll illusion. The illusion works like this: once we scroll and reach the cloned items, we reset the scroll position to 0. So, as soon as the same (visual) point is reached, we jump back to the beginning.

它的工作原理并不是太复杂：我们需要克隆一堆菜单项，以确保我们有足够的菜单项来创建滚动效果。 幻像的工作方式如下：一旦滚动并到达克隆的项目，便会将滚动位置重置为0。因此，一旦到达相同(可视)点，我们便跳回到起点。

How many clones do we need? We need as many clones as items fit into the visible area. As an example, if 8 items fit into the height of the viewport, than we need to create 8 clones.

我们需要多少个克隆？ 我们需要与适合可见区域的项目一样多的克隆。 例如，如果8个项目适合视口的高度，那么我们需要创建8个克隆。

The amount of menu items is important when considering how much space they’ll take up on the screen (or scroll area). If your items don’t fill the screen fully, the illusion will break. So you need to make sure to have enough and to set a reasonable font size for the items to occupy enough space.

考虑菜单项在屏幕(或滚动区域)上要占用多少空间时，菜单项的数量很重要。 如果您的物品没有完全填满屏幕，则错觉将打破。 因此，您需要确保有足够的空间并设置合理的字体大小，以使项目占据足够的空间。

We let the menu be scrollable but we hide the scrollbar. The menu is covering the whole viewport and this is the element we scroll.

我们使菜单可滚动，但隐藏滚动条。 菜单覆盖了整个视口，这是我们滚动的元素。

Tip: if you want to visualize the illusion, just make sure that the scrollbar is not hidden. You’ll see it jumping back to the top, once the “cloned” zone is reached. Just delete:

提示：如果您想形象化错觉，只需确保滚动条未隐藏即可。 到达“克隆”区域后，您会看到它跳回到顶部。 只需删除：

::-webkit-scrollbar {
  display: none;
}

… and the line scrollbar-width: none; for Firefox.

…和scrollbar-width: none; 用于Firefox。

Note that I use a fallback for mobile where I simply want to show the complete menu.

请注意，我在移动设备上使用了后备广告，我只想显示完整的菜单。

Hope you find this little component useful!

希望您发现这个小组件有用！

翻译自: https://tympanus.net/codrops/2020/05/23/an-infinitely-scrollable-vertical-menu/

垂直滚动和水平滚动