滚动条自定义样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>滚动条插件</title>
		<link href="http://guangzhou.auto.qq.com/2017web/jquery.mCustomScrollbar.css" rel="stylesheet" />
		<style type="text/css">
			html,body{font-family: "微软雅黑";font-size: 12px;}
			*{padding: 0;margin: 0;border:none;}
			/*滚动条*/
			#scroll{width: 100%;height: 100%;overflow-y: scroll;}
			#scroll h3{font-size: 14px;line-height: 19px;font-weight: bold;margin-top: 8px;}
			#scroll p{    font-size: 12px;text-align: left;line-height: 18px;}
			/*插件修改*/
			/*长滑条*/
			.mCSB_scrollTools .mCSB_draggerRail{
				    background-color: #000;
			}
			/*短滑块*/
			.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
				background-color: red;
			}
			.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
				 background-color: rgba(0,0,0,0.9);
			}
		</style>
	</head>
	<body>
		<div style="width: 90%;margin-left: 5%;height: 300px;border: 1px solid red;overflow: hidden;">
			<div id="scroll">
				<ul>
				</ul>
			</div>
		</div>
	</body>
	  <script src="http://guangzhou.auto.qq.com/js/jquery.min3.2.1.js"></script>
	 <script src="http://guangzhou.auto.qq.com/js/jquery.mCustomScrollbar.min.js"></script>
	<script type="text/javascript">
		$(function(){
				var mes = [
			        {"name":"1","QCname":"临夏市环球万腾汽车销售服务有限公司","nameCode":"C1215","city":"临夏市","cityCode":"42","省份":"甘肃省","proCode":"4","tel":"0930-6667111","address":"临夏市南龙镇马家庄牛津河大道中段"},
			        {"name":"2","QCname":"兰州鑫通汽车销售有限公司","nameCode":"C1301","city":"兰州市","cityCode":"37","省份":"甘肃省","proCode":"4","tel":"0931-2331999","address":"甘肃省兰州市城关区北龙口永新化工园区路口"},
			        {"name":"3","QCname":"兰州良志实业集团有限责任公司","nameCode":"C1302","city":"兰州市","cityCode":"37","省份":"甘肃省","proCode":"4","tel":"0931-8507611","address":"甘肃省兰州市城关区天水北路良志嘉年华一期南侧良志汽车城"},
			        {"name":"4","QCname":"甘肃泰华汽车销售服务有限公司","nameCode":"C1303","city":"兰州市","cityCode":"37","省份":"甘肃省","proCode":"4","tel":"0931-2144666","address":"甘肃省兰州市西固区环形东路296号"},
			        {"name":"5","QCname":"酒泉良志汽车销售有限公司","nameCode":"C1311","city":"酒泉地区","cityCode":"45","省份":"甘肃省","proCode":"4","tel":"0937-2855180","address":"酒泉市肃州区西郊工业风光大厦向东800米"},
			        {"name":"6","QCname":"天水良志汽车销售有限公司","nameCode":"C1312","city":"天水市","cityCode":"43","省份":"甘肃省","proCode":"4","tel":"0938-8385598","address":"甘肃省天水市秦州区东十里工业园区(飞天雕漆公司隔壁）"},
			        {"name":"7","QCname":"白银恒信东顺汽车销售服务有限公司","nameCode":"C1313","city":"白银市","cityCode":"38","省份":"甘肃省","proCode":"4","tel":"0943-8836777","address":"甘肃省白银市白银区中小企业创业基地"},
			        {"name":"8","QCname":"平凉恒信东顺汽车销售服务有限公司","nameCode":"C1315","city":"平凉地区","cityCode":"47","省份":"甘肃省","proCode":"4","tel":"0933-8695550","address":"平凉市工业园区东一路"},
			        {"name":"9","QCname":"定西恒信东顺汽车销售服务有限公司","nameCode":"C1316","city":"定西地区","cityCode":"44","省份":"甘肃省","proCode":"4","tel":"400-872-9667","address":"甘肃省定西市安定区南川经济开发区向南500米定西恒信日产专营店"},
			        {"name":"10","QCname":"庆阳良志汽车销售有限公司","nameCode":"C1317","city":"庆阳地区","cityCode":"48","省份":"甘肃省","proCode":"4","tel":"0934-8668688","address":"甘肃省庆阳市西峰区西环路北段陇东汽车城"},
			        {"name":"11","QCname":"甘肃天利成汽车销售服务有限责任公司","nameCode":"C1318","city":"武威地区","cityCode":"49","省份":"甘肃省","proCode":"4","tel":"0935-6356777","address":"武威市凉州区天马大道西段武威汽车城（凉州职业中专对面）"},
			        {"name":"12","QCname":"张掖天利成汽车销售服务有限责任公司","nameCode":"C1319","city":"张掖地区","cityCode":"50","省份":"甘肃省","proCode":"4","tel":"0936-8567000","address":"张掖市甘州区滨河新区西三环，绿洲现代物流园区汽车城。"},
			    ];
			    var l=mes.length,$li='';
			    for(var i=0;i<l;i++){
			    	$li ='<li>'+
							'<h3>'+mes[i].name+'</h3>'+
							'<p>电话：'+mes[i].tel+'</p>'+
							'<p>地址：'+mes[i].address+'</p>'+
						'</li>'
					$('#scroll>ul').append($li)	
			    }	
			    $(window).load(function() {
				    $("#scroll").mCustomScrollbar({
				        scrollInertia: 550,
				        autoHideScrollbar: false
				    });
				})
		})

	</script>
</html>
样式自己随便修改
滚动条自定义样式

猜你喜欢
