[分享]css列表内容可以上下滑动

在网页中，我们经常需要展示一些列表内容，如新闻列表、商品列表等。当列表的长度超过了屏幕的高度时，我们通常会使用滚动条来实现上下滑动。而在css中，我们可以使用overflow属性来控制列表内容是否可滑...

在网页中，我们经常需要展示一些列表内容，如新闻列表、商品列表等。当列表的长度超过了屏幕的高度时，我们通常会使用滚动条来实现上下滑动。而在css中，我们可以使用overflow属性来控制列表内容是否可滑动，下面是一个例子：

ul {
  overflow: auto;
  max-height: 200px;
} 

这段代码的意思是，当列表内容超过200像素时，列表将出现滚动条，并可以实现上下滑动。其中，overflow属性可以有以下取值：

• visible：默认值，不会剪切溢出元素

• hidden：剪切溢出元素

• scroll：始终显示滚动条

• auto：只在必要时出现滚动条

当然，我们也可以使用Webkit和Moz前缀来兼容不同的浏览器，代码如下：

ul {
  overflow: auto; /*标准语法*/
  overflow: -webkit-auto; /*Chrome和Safari*/
  overflow: -moz-auto; /*Firefox*/
  max-height: 200px;
} 

总之，通过使用overflow属性，我们可以很方便地实现列表内容的上下滑动，同时也可以极大地提升网页的用户体验。