css修改滚动条

系统默认的滚动条可能不是很美观，有时候我们想要自己进行样式的修改，就可以用到下面的方法

设置滚动条的属性为overflow，取值是x轴和y轴

如果想单独设置某个轴，可以使用overflow-x,overflow-y


html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .box {
            width: 50%;
            height: 50vh;
            margin: 50px auto;
            background-color: pink;
            /* 如果y轴超出，则会出现滚动条，否则就不会出现 */
            overflow-y: auto;
        }
 
        /* 修改滚动条的宽度 */
        .box::-webkit-scrollbar {
            width: 5px;
        }
 
        /* 修改滚动条的轨道颜色 */
        .box::-webkit-scrollbar-track {
            background-color: skyblue;
        }
 
        /* 修改滚动条的滑块颜色和圆角 */
        .box::-webkit-scrollbar-thumb {
            background-color: red;
            border-radius: 50px;
        }
 
        /* 修改滚动条的滑块在hover状态下的颜色 */
        .box::-webkit-scrollbar-thumb:hover {
            background-color: #555;
        }
    style>
head>
 
<body>
    <div class="box">
        
        <p>1p>
        <p>2p>
        <p>3p>
        <p>4p>
        <p>5p>
        <p>6p>
        <p>7p>
        <p>8p>
        <p>9p>
        <p>10p>
    div>
body>
 
html>

相关阅读:
云原生之深入解析Kubernetes Pod的网络状态监控
C语言基本算法之选择排序
学习网络编程No.10【深入学习HTTPS】
【数据结构】二叉树
机器学习实战（一）Keras 人工神经网络简介
Redis的缓存穿透，缓存击穿，缓存雪崩
Nginx基础教程
「项目管理工具」进度猫如何实现可视化？
使用gitblit在Windows上搭建git服务器
如何在CSDN获得铁粉

原文地址：https://blog.csdn.net/qq_52845451/article/details/133768438