在本文中,我们将看到如何使用 CSS 创建垂直可滚动部分。 HTML 代码用于创建部分的基本结构,CSS 代码用于设置样式,
HTML代码:
- 使用类容器创建一个 HTML div元素。
- 用类框创建了三个嵌套的div
- 用 class box在每个 div里面写一些内容。
CSS 代码:
- 在这种情况下添加了“滚动”选项以始终显示溢出-y属性的滚动条。
- 视口的100%高度设置高度为100vh,设置的原因是如果内容超过,它会添加一个滚动条。
- scroll-snap-type设置为y ,以便滚动对齐的方向在容器div 的 y 轴上。如果需要在特定时间停止浏览器,则会添加此属性。这会强制滚动到 y 轴上的捕捉点。
- 滚动对齐 属性用于具有“box”类的元素来设置滚动将捕捉到的位置。 scroll-snap-align用于告诉滚动应该停止的点。
例子:
HTML
输出: