今天在搭前端頁面的時候，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%; }

一個有趣的滾動條就這樣完成了。

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的有趣的滚动条的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。