自定義滾動條樣式


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div {
				width: 249px;
				height: 300px;
				overflow: auto;
			}			
			::-webkit-scrollbar {
				width: 6px;
				height: 6px;
			}
			/*滾動區域背景*/		
			::-webkit-scrollbar-track-piece {
				background-color: silver;
				-webkit-border-radius: 6px;
			}	
			/*豎向滾動條*/		
			::-webkit-scrollbar-thumb:vertical {
				height: 5px;
				background-color: yellow;
				-webkit-border-radius: 6px;
			}
			/*橫向滾動條*/			
			::-webkit-scrollbar-thumb:horizontal {
				width: 5px;
				background-color: red;
				-webkit-border-radius: 6px;
			}
		</style>
	</head>
	<body>
		<div>
			<p>1111111111111111111111111111111</p>
			<p>1111111111111111111111111111111</p>
			<p>1111111111111111111111111111111</p>
			<p>1111111111111111111111111111111</p>
			<p>1111111111111111111111111111111</p>
			<p>1111111111111111111111111111111</p>
			<p>1111111111111111111111111111111</p>
			<p>1111111111111111111111111111111</p>
			<p>1111111111111111111111111111111</p>
			<p>1111111111111111111111111111111</p>
			<p>1111111111111111111111111111111</p>
			<p>1111111111111111111111111111111</p>
			<p>1111111111111111111111111111111</p>
			<p>1111111111111111111111111111111</p>
			<p>1111111111111111111111111111111</p>
		</div>
	</body>
</html>

  如果文章對你有幫助,麻煩幫忙點個贊哦!嘿嘿!做一個靠譜的技術博主!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM