今天在搭前端页面的时候，UI给过来的一个自定义的滚动条，要求必须与设计的一样，觉得有点有趣，现在记录一下。
效果图：

具体代码是这样的：

/*字体太长，这里我就减少一些*/
<div class="lss-test"><h2>人生如茶</h2><p>人生如茶。刚泡上的头道茶，沸水一沏，茶香四溢，犹如人生初年，刚入尘世，味淡而清香；二三道茶犹如人生进入青壮年，拼搏进取，充满坎坷，其味浓烈醇厚；茶至数道，味淡而涩甜，犹如老年，俗念淡化，回归自然。
人生如下棋。人的一生都在同命运下棋，不是你操纵命运，便是命运操纵你，战胜命运要有耐心，要有信心，你必须竭尽全力给自己创造机会。也许你的命运之棋步步皆输，你也无须悲观，坚持着走下去，哪怕只剩一门炮，你仍有机会打它的闷宫。人生如旅行。
人生如一次长长的旅行，旅行中有坦途也有弯路，你得以平静的心态面对每一天，挑战自我，执着向前，一如既往地朝着目的地走下去。当你到达终点站顾却来径时，才发现人生的旅途有喜有忧，有笑有泪，甚至得少失多，而这一切已构成了你生命旅程的全部。人生是一本书。
人生是一本难写的书，你就是再富有情感，也难以料想未来的墨迹留于何处。可你不写不行，于是你的每一天都是一篇文章，而且体裁各异，一页页的云彩或淡或浓，蓦然将你的生命包围，铸成了你的生活。聪明者会在每一页写出不朽的诗文，怠惰者却把太好的青春账簿涂抹一通，一无所获。一页页重复365次，你便迎来了一个个难忘的历程，不必强求别人的赏识，最重要的是写下无憾的人生。
人生可用尺量。这把尺在人们自己心中，心静则尺平，心明则尺准。这把尺度量着人生的轨迹和一言一行。请记住：量人时不要失之过严，量己时不要疏于过宽。“责人之心责己，恕己之心恕人。”持平这把尺子，必有堂堂正正的人生。人生如茶。刚泡上的头道茶，沸水一沏，茶香四溢，犹如人生初年，刚入尘世，味淡而清香；二三道茶犹如人生进入青壮年，拼搏进取，充满坎坷，其味浓烈醇厚；茶至数道，味淡而涩甜，犹如老年，俗念淡化，回归自然。
人生如下棋。人的一生都在同命运下棋，不是你操纵命运，便是命运操纵你，战胜命运要有耐心，要有信心，你必须竭尽全力给自己创造机会。也许你的命运之棋步步皆输，你也无须悲观，坚持着走下去，哪怕只剩一门炮，你仍有机会打它的闷宫。人生如旅行。</p>
</div>

/*css*/
.lss-test h2{font-size: 20px;
}
.lss-test p{margin-top: 18px;color: #333;font-size: 12px;
}
.lss-test{height: 395px;overflow-y:auto;
}
/*定义滚动条高及背景颜色*/ 
.lss-test::-webkit-scrollbar 
{ width: 10px; background-color: #fff;
}   
/*定义滚动条轨道 内阴影,圆角*/ 
.lss-test::-webkit-scrollbar-track 
{ border-radius: 6px; background-color:#7d7d7d;background: url(../img/滚动条2.gif) no-repeat;  background-position: center center;/*设置背景图像的起始位置居中*/
}    
/*定义滑块 内阴影+圆角*/
.lss-test::-webkit-scrollbar-thumb {border-radius: 10px;background: url(../img/滚动条.gif) no-repeat;background-size:100% 100%;
}

一个有趣的滚动条就这样完成了。