📜  如何使用 CSS 在没有内容的情况下使 div 垂直滚动?

📅  最后修改于: 2021-11-10 06:02:22             🧑  作者: Mango

在本文中,我们将看到如何使用 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


  

    

  

    
        
        
        
    
  


输出: