通过css设置滚动条样式
在移动端通常情况下滚动条是不显示出来,这样会让一些不明就里的人不知道是否可以滑动查看更多的信息,通过css可以来设置滚动条的样式,并且让它一直显示出来。
.rullContent{ margin: 0 auto; font-size: 13px; line-height: 25px; color: #24e2fe; height: calc(100% - 120px); overflow-y: scroll; margin-top: 40px; width: 80%; text-align: justify; padding-left: 10px; padding-right: 10px; } .rullContent::-webkit-scrollbar-track-piece { background-color: rgba(0, 0, 0, 0); border-left: 1px solid rgba(0, 0, 0, 0); } .rullContent::-webkit-scrollbar { width: 5px; height: 13px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .rullContent::-webkit-scrollbar-thumb { background-color: rgba(204, 204, 204, 0.5);//设置滚动条的颜色 background-clip: padding-box; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; min-height: 28px; } .rullContent::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, 0.5); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }