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;


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


相关文章
|
1天前
|
Web App开发 前端开发 JavaScript
只需一行CSS代码,让长列表网页的渲染性能提升几倍以上!
只需一行CSS代码,让长列表网页的渲染性能提升几倍以上!
|
4天前
|
前端开发
CSS列表
【5月更文挑战第4天】CSS列表。
14 3
|
4天前
|
前端开发 JavaScript UED
【专栏:交互与用户体验篇】CSS 滚动效果与视差滚动
【4月更文挑战第30天】本文探讨了CSS滚动效果和视差滚动在提升网页用户体验中的作用。CSS滚动效果通过`transition`和`animation`属性实现元素动态变化,包括平滑滚动、元素跟随和滚动触发动画。视差滚动则利用不同元素滚动速度差异营造立体感,适用于长页面设计、故事讲述和创意展示。实现方法包括纯CSS和结合JavaScript。这些效果能增强吸引力、提升沉浸感并引导用户注意力,但需注意性能优化、适度使用和兼容性测试。案例分析展示了它们在实际项目中的应用和影响。
|
4天前
|
前端开发
CSS列表属性
CSS列表属性。
18 5
|
4天前
|
前端开发 JavaScript
从0到1:用HTML、CSS和JavaScript构建一个简单的待办事项列表
从0到1:用HTML、CSS和JavaScript构建一个简单的待办事项列表
27 0
|
4天前
编程笔记 html5&css&js 015 HTML列表
编程笔记 html5&css&js 015 HTML列表
|
4天前
|
前端开发 JavaScript API
|
5月前
|
前端开发
纯css实现滚动(滑动)区域
项目需求: 实现天气24小时预报,类似于华为等天气app,有个可以滑动的区域 完成效果
41 0
|
6月前
|
前端开发
css大屏滚动展示样式
css大屏滚动展示样式
29 0
|
6月前
|
前端开发
CSS实现隐藏滚动条但是可以滚动
CSS实现隐藏滚动条但是可以滚动
31 0