[分享]css内容上下滚动条

CSS中的内容滚动条可以让我们在出现内容溢出而无法显示时，增加滚动条来查看没有显示的部分。内容滚动条一般分为水平滚动条和垂直滚动条两种。要给HTML元素添加内容滚动条，我们可以使用CSS的overfl...

CSS中的内容滚动条可以让我们在出现内容溢出而无法显示时，增加滚动条来查看没有显示的部分。内容滚动条一般分为水平滚动条和垂直滚动条两种。

要给HTML元素添加内容滚动条，我们可以使用CSS的overflow属性。如果想要垂直滚动条，我们可以把overflow-y属性设置为scroll，如果想要水平滚动条，我们可以把overflow-x属性设置为scroll。

/*垂直滚动条*/
.example{
  height: 200px;
  overflow-y: scroll;
}

/*水平滚动条*/
.example{
  width: 200px;
  overflow-x: scroll;
} 

此外，我们还可以使用overflow:auto来自动控制要不要出现滚动条。当内容不溢出时，不会出现滚动条，内容溢出后就会出现滚动条。

/*自动滚动条*/
.example{
  height: 200px;
  overflow: auto;
} 

需要注意的是，overflow属性只在标签的宽度或高度不足以放置其内容的情况下使用。如果标签的宽度或高度足以容纳其内容，那么overflow属性便无效。

除了以上的基本用法，CSS内容滚动条还有很多特殊用法，比如可以自定义滚动条的样式、隐藏滚动条、对不同的浏览器适配不同的滚动条等等。需要我们在实际应用中学习掌握。