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)


相关推荐

  • linux命令mysql启动,linux下启动mysql的命令

    linux命令mysql启动,linux下启动mysql的命令linux下启动mysql的命令一、总结一下:1.linux下启动mysql的命令:mysqladminstart/ect/init.d/mysqlstart(前面为mysql的安装路径)2.linux下重启mysql的命令:mysqladminrestart/ect/init.d/mysqlrestart(前面为mysql的安装路径)3.linux下关闭mysql的命令:mysqla…

  • webstorm激活码3月最新在线激活

    webstorm激活码3月最新在线激活,https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

  • 安装Ubuntu 21.04后要做的事「建议收藏」

    安装Ubuntu 21.04后要做的事「建议收藏」Ubuntu19.10发布了,带来了很多新特性,同样也依然带着很多不习惯的东西,所以装完系统后还要进行一系列的优化。1.删除libreofficelibreoffice虽然是开源的,但是Java写出来的office执行效率实在不敢恭维,装完系统后果断删掉sudoapt-getremovelibreoffice-common2.删除Amazo…

  • 在线涂改图片 php,php UEditor如何实现删除图片功能

    在线涂改图片 php,php UEditor如何实现删除图片功能phpueditor删除图片的实现方法:首先找到“uedior/dialogs/image/image.js”文件并修改Add内容;然后打开“mageManager.php”文件并添加内容为“functiondelfile()”即可。php版给UEditor的图片在线管理栏目增加图片删除功能1.找到uedior/dialogs/image/image.js文件,Add为修改部分的代码:/***…

  • pycharm安装配置教程_pycharm2020.2安装教程

    pycharm安装配置教程_pycharm2020.2安装教程Pycharm下载地址:http://www.jetbrains.com/pycharm/  (选择professional版)2.下载好之后直接默认安装

  • 一文读懂C++虚继承的内存模型

    一文读懂C++虚继承的内存模型一文读懂C++虚继承的内存模型1、前言2、多继承存在的问题3、虚继承简介4、虚继承在标准库中的使用5、虚继承下派生类的内存布局解析6、总结1、前言C++虚继承的内存模型是一个经典的问题,其具体实现依赖于编译器,可能会出现较大差异,但原理和最终的目的是大体相同的。本文将对g++中虚继承的内存模型进行详细解析。2、多继承存在的问题C++的多继承是指从多个直接基类中产生派生类的能力,多继承的派生类继承了所有父类的成员。从概念上来讲这是非常简单的,但是多个基类的相互交织可能会带来错综复杂的设计问题,命名冲突

发表回复

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

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