利用CSS3實現(xiàn)自定義滾動條代碼分享

2024-07-11 08:25:46

字體：大中小

供稿：網(wǎng)友

先來看看效果圖

話不多說，直接看實例代碼

復(fù)制代碼

代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>CSS3實現(xiàn)自定義滾動條代碼</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
body{padding:0;margin:0;}
.box{ width:600px;height: auto;margin:0 auto; }
.scroll{ overflow:auto; width: 470px;height: 210px;padding-right: 25px; margin-top: 18px;}
.scroll p{font-family: "微軟雅黑";font-size: 14px;color: #9F9F9F;line-height: 25px;margin-top: 20px;}
#scroll-1 {
overflow:auto;
}
#scroll-1::-webkit-scrollbar {
width:10px;
height:10px;
}
#scroll-1::-webkit-scrollbar-button {
background-color:#fff;
}
#scroll-1::-webkit-scrollbar-track {
background:#dfdfdf;
border-radius:5px;
}
#scroll-1::-webkit-scrollbar-track-piece {
}
#scroll-1::-webkit-scrollbar-thumb{
background:#F2C826;
border-radius:5px;
}
#scroll-1::-webkit-scrollbar-corner {
background:#82AFFF;
}
#scroll-1::-webkit-scrollbar-resizer {
background:#dfdfdf;
}

</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<div class="box">
<div class="scroll" id="scroll-1">
<p>無避讓立體車庫是錯新站長站斥巨資打造，公司注冊資本一個億，平臺用統(tǒng)一的標準多維度地展示立體車庫行業(yè)企業(yè)，購買者可以通過這個平臺就輕松了解國內(nèi)外優(yōu)秀立體車庫企業(yè)的產(chǎn)品與服務(wù)。實現(xiàn)停車難城市的本地化服務(wù)</p>
<p>為行業(yè)研發(fā)定制化無避讓立體車庫產(chǎn)品。您不必成為專家，我們?yōu)槟峁┎町惢?wù)為行業(yè)帶來新的利潤增長致力于用無避讓立體車庫改善生活，領(lǐng)跑國內(nèi)立體</p>
<p>無避讓立體車庫是錯新站長站斥巨資打造，公司注冊資本一個億，平臺用統(tǒng)一的標準多維度地展示立體車庫行業(yè)企業(yè)，購買者可以通過這個平臺就輕松了解國內(nèi)外優(yōu)秀立體車庫企業(yè)的產(chǎn)品與服務(wù)。實現(xiàn)停車難城市的本地化服務(wù)</p>
<p>為行業(yè)研發(fā)定制化無避讓立體車庫產(chǎn)品。您不必成為專家，我們?yōu)槟峁┎町惢?wù)為行業(yè)帶來新的利潤增長致力于用無避讓立體車庫改善生活，領(lǐng)跑國內(nèi)立體</p>
</div>
</div>
<script type="text/javascript" src="<a ></script</a>>
<script type="text/javascript">

</script>
</body>
</html>

上一篇：利用純CSS實現(xiàn)動態(tài)的文字效果實例

下一篇：純CSS3實現(xiàn)圖片無間斷輪播效果

發(fā)表評論

共有條評論