css中显示上下拉条 |css3 从往下

/*样式1*/
.container{
height: 300px;
overflow-x: hidden;  /*隐藏x轴滚动条*/
overflow-y: auto;   /*显示y轴滚动条*/
}
/*样式2*/
.container{
height: 300px;
overflow-x: hidden; /*隐藏x轴滚动条*/
overflow-y: scroll; /*显示y轴滚动条*/
}

以上是两种实现显示上下拉条的方式，具体使用哪种方式可以根据实际需求来选择。需要注意的是，要在容器的高度上设置一个固定值，这样才能使内容超出容器高度时出现上下拉条。

此外，大家还可以通过CSS来对滚动条进行样式的修改，比如修改滚动条的颜色、样式、宽度等。

/*修改滚动条样式*/
.container::-webkit-scrollbar {
width: 12px;
}
/*滚动条前景颜色*/
.container::-webkit-scrollbar-thumb {
background-color: #0078d7;
}
/*滚动条背景颜色*/
.container::-webkit-scrollbar-track {
background-color: #f5f5f5;
}

通过以上代码大家就可以修改滚动条，更好地满足大家的视觉需求。

总结一下，CSS中显示上下拉条的实现方法可以使用overflow属性来设置，同时也可以通过修改滚动条样式来美化页面效果。