zoukankan      html  css  js  c++  java
  • 自定义滚动条样式

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			div {
    				 249px;
    				height: 300px;
    				overflow: auto;
    			}			
    			::-webkit-scrollbar {
    				 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 {
    				 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>
    

      如果文章对你有帮助,麻烦帮忙点个赞哦!嘿嘿!做一个靠谱的技术博主!

  • 相关阅读:
    OJ生成器(一)制作Online Judge前的准备和策划
    中国剩余定理
    图片
    扩展GCD的一点心得
    用css控制连续英文字符或数字换行
    CTFHUB HTTP协议之请求方式
    PHP基础05---文件处理
    PHP基础04---文件包含
    PHP基础03---数组
    PHP基础01
  • 原文地址:https://www.cnblogs.com/CatcherLJ/p/11174720.html
Copyright © 2011-2022 走看看