CSS横向滚动条⾃定义样式
接上⼀篇，有的时候在项⽬⾥⾯会使⽤到滚动条
但是浏览器默认的滚动条的样式不怎么好看
这个时候需要进⾏⼀些处理
⼀般⽤到两种
1：隐藏滚动条，但是可以⽀持滚动的⽅法
::-webkit-scrollbar {display:none}
⽰例：
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(            }
.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;
}
/*滚动条⾥⾯⼩⽅块*/
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(            }
.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)
}
});
css设置表格滚动条
</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",
"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,
} ]

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。