1.滚动条的设置,如果想要实现下面这个滚动效果
2.css样式如下:
::-webkit-scrollbar { //设置滚动条的宽高
width: 10px;
height: 10px;
background: transparent;
overflow: visible;
}
::-webkit-scrollbar-button:vertical:single-button:start { //设置滚动条的按钮,这里是设置上图的1
width: 10px;
height: 10px;
display: block;
background-color: #d23d47;
background-image: url(img/uparrow.png); //这里是自己找的上三角型图片,可以去阿里巴巴矢量图标库查找
background-size: 100% 100%;
}
::-webkit-scrollbar-button:vertical:single-button:end { //设置滚动条的按钮,这里是设置上图的3
width: 10px;
height: 10px;
display: block;
background-color: #d23d47;
background-image: url(img/downarraw.png);//这里是自己找的下三角型图片,可以去阿里巴巴矢量图标库查找
background-size: 100% 100%;
}
::-webkit-scrollbar-thumb {// 设置滚动条上的滚动滑块,这里是设置上图的2
background: white;
background: #ff6600;
overflow: visible;
border-radius: 100px;
}
::-webkit-scrollbar-track {// 设置滚动条轨道,这里是设置上图的4
background: #c53d45;
margin-top: 0.1em;
margin-bottom: 0.1em;
}
eg:
<div style="height: 100px;width: 100px;overflow-y: auto;">*(1898年3月5日-1976年1月8日) ,字翔宇,曾用名飞飞、伍豪、少山、冠生等 [1] [6] ,原籍浙江绍兴,1898年3月5日生于江苏淮安。1921年加入中国*,是伟大的马克思主义者,伟大的无产阶级革命家、政治家、军事家、外交家,*主要*之一,中国人民解放军主要创建人之一,*的开国元勋,是以*同志为核心的党的第一代*领导集体的重要成员 [2] 。
1976年1月8日在北京逝世。他的逝世受到极广泛的悼念。由于他一贯勤奋工作,严于律己,关心群众,被称为“人民的好总理”。他的主要著作收入《*选集》。</div>