接上一篇，有的时候在项目里面会使用到滚动条
但是浏览器默认的滚动条的样式不怎么好看
这个时候需要进行一些处理
一般用到两种
1:隐藏滚动条，但是可以支持滚动的方法
::-webkit-scrollbar {display:none}
示例：
/p/9efdb18d92a6
2：自定义滚动条样式
.healthName::-webkit-scrollbar {/*滚动条整体样式*/width: 10px;/*高宽分别对应横竖滚动条的尺寸*/height: 6px;}.healthName::-webkit-scrollbar-thumb {/*滚动条里面小方块*/border-radius: 10px;background-color: #02adf7;background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);}.healthName::-webkit-scrollbar-track {/*滚动条里面轨道*/-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);background: #1b5aa9;}
示例：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>div横向滚动条</title><style>.healthName {width: 900px;height: 100px;overflow-x: scroll;overflow-y: hidden;white-space: nowrap;/* 父级元素中的内容不换行 */}.healthName::-webkit-scrollbar {/*滚动条整体样式*/width: 10px;/*高宽分别对应横竖滚动条的尺寸*/height: 6px;}.healthName::-webkit-scrollbar-thumb {/*滚动条里面小方块*/border-radius: 10px;background-color: #02adf7;background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);}.healthName::-webkit-scrollbar-track {/*滚动条里面轨道*/-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);background: #1b5aa9;}.healthlist {display: inline-block;}</style></head><body><div class="col-md-6 col-sm-6 col-xs-6 healthName"><!-- <div class="healthlist"><img class="img" src="images/point.png"/><p>张三丰</p><p>89bpm</p><p>120/78</p></div> --></div></body><script src="/jquery/2.1.1/jquery.min.js"></script><script>$.ajax({url: "health.json",data: {},type: 'GET',success: function(data) {var html = "";$.each(data, function(i, item) {html += " <div class='healthlist'>";html += "<img class='img' src=" + item.image1 + "/>";html += "<p>" + item.doneNum + "</p>";html += "<p>" + item.date + "</p>";html += "<p>" + item.date + "</p></div>";})$(".healthName").append(html)}});</script></html>
json:
[{"image1": "images/fence/fence1.png","doneNum": 130,"date": "120/78"}, {"image1": "images/fence/fence1.png","doneNum": 80,"date": "120/78"}, {"image1": "images/fence/fence1.png","doneNum": 90,"date": "120/78"}, {"image1": "images/fence/fence1.png","doneNum": 90,"date": "120/78"}, {"image1": "images/fence/fence1.png","doneNum": 90,"date": "120/78"}, {"image1": "images/fence/fence1.png","doneNum": 90,"date": "120/78"}, {"image1": "images/fence/fence1.png","doneNum": 90,"date": "120/78"}, {"image1": "images/fence/fence1.png","doneNum": 90,"date": "120/78"}, {"image1": "images/fence/fence1.png","doneNum": 90,"date": "120/78"}, {"image1": "images/fence/fence1.png","doneNum": 90,"date": "120/78"}, {"image1": "images/fence/fence1.png","doneNum": 90,"date": "120/78"}, {"image1": "images/fence/fence1.png","doneNum": 90,"date": "120/78"}, {"image1": "images/fence/fence1.png","doneNum": 90,"date": "120/78"}, {"image1": "images/fence/fence1.png","doneNum": 90,"date": "120/78"}, {"image1": "images/fence/fence1.png","doneNum": 90,"date": "120/78"}, {"image1": "images/fence/fence1.png","doneNum": 90,"date": "120/78"}, {"image1": "images/fence/fence1.png","doneNum": 90,"date": "120/78"}, {"image1": "images/fence/fence1.png","doneNum": 110,"date": "120/78"}, {"image1": "images/fence/fence1.png","doneNum": 52,"date": "120/78"}]
