位置: IT常识 - 正文
CSS实现列表滚动效果(css滚动条自动滚动)
发布时间：2024-01-16推荐整理分享CSS实现列表滚动效果(css滚动条自动滚动)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:css里面怎么设置为滚动形式,css 设置滚动,css3实现列表滚动,css怎么设置滚动图片,css表格滚动条,css里面怎么设置为滚动形式,css3实现列表滚动,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;
避免出现设置好一切后，滚动无效的情况
上一篇：Yolov5实例分割Tensorrt部署实战(yolov5实例分割原理详解)
下一篇：Python实现人工神经网络回归模型(MLPRegressor算法)并基于网格搜索(GridSearchCV)进行优化项目实战(如何用python制作人工智能)
