修改滚动条默认样式（::-webkit-scrollbar-track）

最新推荐文章于 2026-04-24 04:26:37 发布

原创最新推荐文章于 2026-04-24 04:26:37 发布 · 7.3k 阅读

10 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #html

本文详细介绍了一种独特的滚动条样式设计方法，包括定制化的滚动条轨道和滑块颜色、阴影效果，以及如何在不同屏幕尺寸下调整布局，确保内容在移动端和桌面端都能良好显示。

效果图
在这里插入图片描述
css代码

        /* 滚动条样式 */
        
        .culture>div.container .right::-webkit-scrollbar {
            width: 6px;
            height: 6px;
            background-color: #f0f0f0;
        }
        
        .culture>div.container .right::-webkit-scrollbar-track {
            box-shadow: inset 0 0 0px rgba(240, 240, 240, 0.5);
            border-radius: 10px;
            background-color: rgba(240, 240, 240, 0.5);
        }
        
        .culture>div.container .right::-webkit-scrollbar-thumb {
            box-shadow: inset 0 0 0px rgba(240, 240, 240, 0.5);
            background-color: #62ab63;
        }

全部代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入jquery -->
    <script src="../../static/jq/jquery.min.js"></script>
    <!-- 引入swiper -->
    <script src="../../static/swiper/swiper.min.js"></script>
    <link rel="stylesheet" href="../../static/swiper/swiper.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        /* 内容部分 */
        
        .culture {
            background: #eefaec;
            padding: 50px;
        }
        
        .culture>div.container {
            margin-top: 100px;
            padding: 3.5rem;
            background: #fff;
            display: flex;
            height: 300px;
        }
        
        .culture>div.container .left {
            height: 100%;
            flex: 1;
            display: flex;
        }
        
        .culture>div.container .left>div {
            writing-mode: vertical-lr;
            padding: 0 5px 0 0;
            font-size: 18px;
            letter-spacing: 2px;
            text-align: end;
            color: #777777;
            font-weight: 500;
        }
        
        .culture>div.container .left .img {
            position: relative;
            padding: 0 0px 0 30px;
        }
        
        .culture>div.container .left .img img {
            position: absolute;
            bottom: 0;
            width: 200px;
            box-shadow: 5px 5px 10px 5px #bdbaba;
        }
        
        .culture>div.container .right {
            flex: 2;
            height: 100%;
            overflow-y: scroll;
        }
        
        .culture>div.container .right .content p {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
            font-size: 13px;
            color: #666;
            line-height: 2;
        }
        /* 滚动条样式 */
        
        .culture>div.container .right::-webkit-scrollbar {
            width: 6px;
            height: 6px;
            background-color: #f0f0f0;
        }
        
        .culture>div.container .right::-webkit-scrollbar-track {
            box-shadow: inset 0 0 0px rgba(240, 240, 240, 0.5);
            border-radius: 10px;
            background-color: rgba(240, 240, 240, 0.5);
        }
        
        .culture>div.container .right::-webkit-scrollbar-thumb {
            box-shadow: inset 0 0 0px rgba(240, 240, 240, 0.5);
            background-color: #62ab63;
        }
        
        @media (max-width: 769px) {
            .culture>div.container .left {
                height: 100%;
                flex: 1;
                display: none;
            }
            .culture {
                padding: 20px;
            }
            .culture>div.container {
                margin-top: 20px;
                padding: 15px;
            }
        }
    </style>
</head>

<body>

    <!-- 第一种 -->
    <div class="culture">

        <div class="container">


            <div class="left">
                <div class="">SERVICE</div>
                <div>LANDSCAPING</div>
                <div class="img"> <img src="./img/curture.jpg" alt=""> </div>
            </div>
            <div class="right">

                <h2 class="text-center my-4 fs-sm-28 fs-24">企业文化</h2>
                <div class="content">
                    <p>位于湖北省黄冈市蕲春县，共有5个苗木基地，总面积12000余亩。常年为新老客户提供紫薇、桂花、红枫、红叶石楠、樱花等多种苗木，同时培育了多个新品种，树种资源丰富，品种优良，众多苗木精品，自产自销，秉承“美化环境建设、真诚服务客户”的宗旨，得到了全国各地客商的信赖。<br></p>
                    <p>紫奎园林同时承接园林绿化工程、市政工程的设计与施工，参与了多个“美丽乡村建设”的项目，获得了党政领导的高度认可和评价。紫奎园林将不忘初心、砥砺前行，为乡村振兴出力出策，为我国的园林绿化事业贡献自己的绵薄之力。企业创始人周平元先生投身于园林苗木行业30多年，从上世纪80年代非常艰苦的条件下起步，经历过多次挫折，但在理想面前不言败，潜心钻研苗木培育技术、土壤、自然环境等，才有了今天的收获。周平元先生还为多个苗农提供栽培技术服务，带领大家共同发展！</p>
                </div>
            </div>

        </div>
    </div>
</body>
<script>
</script>

</html>