CSS横向滚动条自定义样式

接上一篇，有的时候在项目里面会使用到滚动条
但是浏览器默认的滚动条的样式不怎么好看
这个时候需要进行一些处理
一般用到两种
1:隐藏滚动条，但是可以支持滚动的方法

::-webkit-scrollbar {display:none}

示例：
https://www.jianshu.com/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="data:images/point.png"/><p>张三丰</p><p>89bpm</p><p>120/78</p></div> --></div></body><script src="https://cdn.staticfile.org/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"}
]

CSS横向滚动条自定义样式相关推荐

html页面不显示横向滚动条,css横向滚动条不显示？
在html页面开发时,我们经常会使用到css来设置页面的样式,当页面出现横向滚动条时,用css怎么将其清除掉?下面我们来看一下css设置横向滚动条不显示的方法. css可以通过为元素添加overflo ...
android 滚动条自定义样式,IScroll的使用-方向键绑定自定义滚动条样式
之前在webkit上开发一个滚动控件,需要完成的是一段文字,上下键可以滚动,且自定义滚动条.第一想法就是浏览器原生overflow:scroll,且webkit支持自定义滚动条样式: webkit自定 ...
css设置滚动条的样式
1. webkit下面的CSS设置滚动条主要有下面7个属性 ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的 ::-webkit-scrollbar-button 滚动条两端 ...
HTML滚动条S默认最小值,css修改滚动条默认样式
html代码: 这是内容111 这里是内容222 这里是内容333 css代码: .inner{ width: 265px; height: 400px; position: absolute; to ...
css修改滚动条的样式
滚动条的默认样式是这样的: 大灰块做背景,内嵌小灰块做滚动距离的展示. 再加上贴边的宽度,对于内容本身就比较窄的区域来说,这种样式笨重感十足! 单调且无趣! 而像这种样式的滚动条就比较可以了. 滚动条 ...
CSS 实现input自定义样式--文本框
边框设置边框颜色 <!DOCTYPE html> <html> <head><meta charset="utf-8"><t ...
CSS修改滚动条颜色样式(右边滚动条、底部滚动条、div内滚动条)
如下 /* 滚动条宽度 */ ::-webkit-scrollbar{width:1px;} /* 滚动条轨道颜色 */ ::-webkit-scrollbar-track{background-co ...
自定义浏览器滚动条的样式，详细讲解
CSS3自定义滚动条样式 -webkit-scrollbar 有时候觉得浏览器自带的原始滚动条不是很美观,那webkit浏览器是如何自定义滚动条的呢? Webkit支持拥有overflow属性的区域, ...
纯css美化滚动条样式
https://www.emperinter.info/2020/09/20/scrollbar-in-browser/ 自己完善自己博客再Ipad等移动端的菜单时选用了左右滑动的菜单模式!当然就会使 ...

CSS横向滚动条自定义样式

CSS横向滚动条自定义样式相关推荐

最新文章

热门文章