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>
    

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

  • 相关阅读:
    [PHP] 自定义错误处理
    [PHP] url的pathinfo模式加载不同控制器的实现
    [PHP] 自动加载的实现
    [javaSE] java获取文件列表
    [PHP] PHP请求Socket接口测试
    [PHP] java读取PHP接口数据
    [PHP] 读取大文件并显示
    [javaSE] java上传图片给PHP
    HDUOJ----Eddy's research I
    HDUOJ--8球胜负
  • 原文地址:https://www.cnblogs.com/CatcherLJ/p/11174720.html
Copyright © 2011-2022 走看看