CSS实现列表滚动效果

简介: CSS实现列表滚动效果

效果:

应用场景:

1. 一个竖向列表(或横向列表)中有很多行,但是随着页面上下(或左右)滑动,整个列表会随之移动。

2.三级联动菜单,上下滑动的时候。

诸如此类...

在这里介绍一个css属性,overflow-y和overflow-x

以以下代码为例:

<!DOCTYPE html>
<html>
  <head>
    <style>
      div{
        height: 450px;
        overflow-y: scroll;
      }
    </style>
  </head>
  <body>
    <div>
      <p>列表1</p><p>列表2</p><p>列表3</p><p>列表4</p><p>列表5</p><p>列表6</p><p>列表7</p><p>列表8</p><p>列表9</p><p>列表10</p><p>列表11</p><p>列表12</p><p>列表13</p><p>列表14</p><p>列表15</p><p>列表16</p><p>列表17</p><p>列表18</p><p>列表19</p><p>列表20</p><p>列表21</p><p>列表22</p><p>列表23</p><p>列表24</p><p>列表25</p><p>列表26</p><p>列表27</p><p>列表28</p><p>列表29</p><p>列表30</p>
    </div>
  </body>
</html>

关于overflow-y:


当一个块级元素(div 元素、p 元素之类的)的内容在垂直方向发生溢出时,CSS属性 overflow-y决定如何处理溢出的内容。


隐藏溢出内容(hidden),或者显示滚动条(scroll),或者直接显示溢出内容(visible),或者让浏览器来处理(auto)。


关于overflow-x:


当一个块级元素的内容在水平方向发生溢出时,CSS属性 overflow-x 决定应该截断溢出内容,或者显示滚动条,或者直接显示溢出内容。


值得一提的是,滚动的元素不可以浮动,但我们可以给滚动列表的这个大元素设置


overflow:hidden;


white-space:nowrap;


overflow-x: scroll;


避免出现设置好一切后,滚动无效的情况


相关文章
|
2月前
css3实现3D数字时钟滚动特效代码
css3实现3D数字时钟滚动特效代码
230 18
|
4月前
|
前端开发 JavaScript UED
CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随,再到滚动触发动画
本文探讨了CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随,再到滚动触发动画,这些效果增强了页面的吸引力和互动性。视差滚动通过不同层次元素的差异化移动,增加了页面的深度感和沉浸感。文章还讨论了实现方法、性能优化及案例分析,旨在为设计师和开发者提供实用指导。
115 7
|
4月前
|
前端开发
纯css3经典列表式手风琴插件
这是一款十分经典的纯css3列表手风琴插件。该插件使用css兄弟选择器和:target伪类来实现。
|
9月前
|
前端开发 开发者
CSS列表属性:list-style系列属性详解
CSS列表属性:list-style系列属性详解
463 40
|
7月前
|
前端开发
HTML+CSS基础知识(2)选择器的使用、盒子模型的讲解、列表的使用
该博客文章详细介绍了HTML和CSS的基础知识,包括CSS样式的应用方式、语法规则、选择器的使用、盒子模型、内边距、外边距、元素的显示类型以及overflow属性处理溢出内容的方法,并通过代码示例和测试结果截图展示了这些知识点在网页设计中的应用。
HTML+CSS基础知识(2)选择器的使用、盒子模型的讲解、列表的使用
|
7月前
|
JavaScript 前端开发
使用js,html,css实现歌词滚动的效果
使用js,html,css实现歌词滚动的效果
113 0
|
8月前
|
前端开发
css 平滑滚动 scroll-behavior: smooth
css 平滑滚动 scroll-behavior: smooth
94 1
|
9月前
|
前端开发
CSS常用属性之(列表、表格、鼠标)属性,(如果想知道CSS的列表、表格、鼠标相关的属性知识点,那么只看这一篇就足够了!)
CSS常用属性之(列表、表格、鼠标)属性,(如果想知道CSS的列表、表格、鼠标相关的属性知识点,那么只看这一篇就足够了!)
|
8月前
|
前端开发
css实战——清除列表中最后一个元素的下边距
css实战——清除列表中最后一个元素的下边距
118 0
|
8月前
|
前端开发 C++
css实用技巧——锁定页面,禁止滚动 vs 解锁页面,恢复滚动
css实用技巧——锁定页面,禁止滚动 vs 解锁页面,恢复滚动
280 0