Example of CSS setting div scroll bar style

In our daily development work, many pages require the function of scroll bars, which makes it more convenient for users to experience the website pages. There are many styles of scroll bars in DIV, so we will introduce them to you today. Below is an example of setting the scroll bar style of a div using CSS!

Example of div scroll bar style

<style type="text/css">
.scroll{
width:100px;
height:200px;
overflow:auto;/*自动出现滚动条，如果要出现竖直滚动条则改成：overflow-y:auto，如果横向出现滚动条则改成：overflow-x:auto*/
scrollbar-face-color:#F00;/*滚动条凸出部分的颜色(前景色),包括两端的方形按钮、水平或竖直滑动的滑块的颜色*/
scrollbar-track-color:#FFF;/*滚动条的背景颜色,如果省略的话将出现虚点，颜色将采用face-color的颜色*/
scrollbar-arrow-color:#FFF;/*按钮(上下或者左右可以点击使滑块滚动的方形按钮)上三角箭头的颜色*/
scrollbar-3dlight-color:#0F0;/*滚动条亮边的颜色,形成3D效果，有层次感，肉眼观察在滚动条左边及上边出现一条有色线（竖直方向滚动）*/
scrollbar-darkshadow-color:#00F;/*滚动条强阴影的颜色,肉眼观察出现滚动条下边及右边*/
scrollbar-highlight-color:#F0F;/*滚动条空白部分的颜色,肉眼观察改变不明显，具体颜色改变出现在左边和上边空白处，介于face-color效果与3dlingt-color效果之间有个空白颜色（默认为白色）。此外，滚动条前景色有种凹陷的感觉，周边线条颜色凸起*/
scrollbar-shadow-color:#006600;/*立体滚动条阴影的颜色，具体出现在滑块及方形按钮的右边及下边，形成阴影效果，颜色介于face-color效果和darkshadow-color效果之间，不是很明显*/
scrollbar-base-color:#0f0;/*滚动条的基本颜色,当前面7个效果出现时，滚动条基本颜色设置肉眼很难观察到，如果不设置前面7个效果,系统将根据base-color自动设置，其中前景色，背景色(虚点表示)颜色一致，其他效果(阴影以黑色填充),没有什么要求时，建议不设置此效果*/
/*
scrollbar-face-color:#F00;
scrollbar-track-color:#FFF;
scrollbar-arrow-color:#FFF;
这3个效果建议必须设置
*/
}
.font{ color:#006600}
</style>
<div class="scroll">
  <p>文字内容</p>
  <p>文字内容</p>
  <p>文字内容</p>
  <p>文字内容</p>
  <p>文字内容</p>
  <p>文字内容</p>
  <p>文字内容</p>
  <p>文字内容</p>
  <p>文字内容</p>
  <p>文字内容</p>
  <p>文字内容</p>
  <p>文字内容</p>
  <p>文字内容</p>
  <p>文字内容</p>
</div>

Summary:

This article is demonstrated through examples , I introduced CSS to set the div scroll bar style to my friends. I hope it will be helpful to your work!

Related recommendations:

Code examples of scroll bar style setting in CSS (picture)

How to set CSS compatible IE scroll bar style code graphics

About div scroll bar in html Examples of style design

The above is the detailed content of Example of CSS setting div scroll bar style. For more information, please follow other related articles on the PHP Chinese website!