css设置横向滚动条样式_js设置滚动条样式

css设置横向滚动条样式_js设置滚动条样式接上一篇,有的时候在项目里面会使用到滚动条但是浏览器默认的滚动条的样式不怎么好看这个时候需要进行一些处理一般用到两种1:隐藏滚动条,但是可以支持滚动的方法::-webkit-scrollbar{display:none}示例:https://www.jianshu.com/p/9efdb18d92a62:自定义滚动条样式.healthName::-we…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

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

::-webkit-scrollbar {display:none}

Jetbrains全家桶1年46,售后保障稳定

示例:
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="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"
    }
]
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/213513.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 素数判断算法(高效率)「建议收藏」

    素数判断算法(高效率)「建议收藏」chuanbindeng的素数判断算法关于素数的算法是信息学竞赛和程序设计竞赛中常考的数论知识,在这里我跟大家讲一下寻找一定范围内素数的几个算法。看了以后相信对大家一定有帮助。   正如大家都知道的那样,一个数n如果是合数,那么它的所有的因子不超过sqrt(n)–n的开方,那么我们可以用这个性质用最直观的方法来求出小于等于n的所有的素数。   num=0;

  • pycharm 查看函数帮助_WINCC记录字符串变量

    pycharm 查看函数帮助_WINCC记录字符串变量【为了方便自己以后查阅,记录下使用PyCharm时的一些小技巧】正在学习Python,在调试Python程序时,遇到了一个非常大的问题:如何能够方便地查看变量的取值呢?由于使用matlab多年,深深地习惯了Matlab方便地参考变量取值的功能,所以,对于正在学习的python没办法实时查看变量取值感到很是郁闷没想到,原来PyCharm具有这个功能,只不过之前没有发现而已对于将要调试

  • 单目视觉定位测距的两种方式[通俗易懂]

    单目视觉定位测距的两种方式[通俗易懂]单目定位和双目定位的选择,我觉得主要还是成本和时间的考虑。之前也尝试过双目定位,感觉要更精准些,但双目测距需要对两幅图像进行图像变换和极线匹配,稍微耗时了一些。这几天尝试了一下单摄像头进行测距定位,主要有两个思路:  1.定位测量插值得到每个像素的实际坐标    该方法总觉得有很大的问题:一个是摄像头安装后就必须固定不动,稍微的旋转都会导致之间测量的像素点对应的坐标偏移。另一个是人工测量的

  • 解决Oracle锁表[通俗易懂]

    解决Oracle锁表[通俗易懂]1、执行以下语句可查询被锁的表selectb.owner,b.object_name,a.session_id,a.locked_modefromv$locked_objecta,dba_objectsbwhereb.object_id=a.object_id;2、执行以下语句可查询被锁的session和serialselectb.username,b.sid,b.serial#,logon_timefromv$locked_objecta,v$session.

  • Security身份认证之UserDetailsService[通俗易懂]

    Security身份认证之UserDetailsService[通俗易懂]之前我们采用了配置文件的方式从数据库中读取用户进行登录。虽然该方式的灵活性相较于静态账号密码的方式灵活了许多,但是将数据库的结构暴露在明显的位置上,绝对不是一个明智的做法。本文通过Java代码实现UserDetailsService接口来实现身份认证。1.1UserDetailsService在身份认证中的作用SpringSecurity中进行身份验证的是AuthenticationMan…

  • sql server 2012 报表开发(2) reporting service 中制作分组折叠式报表

    sql server 2012 报表开发(2) reporting service 中制作分组折叠式报表前面我们学习了sqlserver2012如何使用ReportingService2012制作报表,对ReportingService制作报表,有了初步的了解,这里我主要记录一下,如何做一个分组折叠式的报表.1. 创建一个报表tb_Bills.rdl,添加一个数据集2.在当前报表中,添加一个列表3.在当前列表中,添加一个父组。选择需要分组字段的分组依据,

    2022年10月20日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号