效果:
应用场景:
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;文章来源:https://www.toymoban.com/news/detail-451214.html
避免出现设置好一切后,滚动无效的情况文章来源地址https://www.toymoban.com/news/detail-451214.html
到了这里,关于CSS实现列表滚动效果的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!