css怎么隐藏div滚动条-前端问答-PHP中文网

css怎么隐藏div滚动条

藏色散人

发布： 2021-04-13 10:31:37

原创

4096人浏览过

css隐藏div滚动条的方法：首先创建HTML示例文件；然后在body中定义一些文字内容；接着设定滚动部分的高度；最后通过“display:none;”属性实现隐藏div滚动条即可。

css怎么隐藏div滚动条

本文操作环境：windows7系统、HTML5&&CSS3版、Dell G3电脑。

css 给div添加滚动并隐藏滚动条,或修改滚动条轨道颜色

在html中

<div class="box">
    <div>下面内容会单独滚动</div>
    <div class="scroll">
        <div class="content">
            <p>1111111111111111</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/1739">
                            <img src="https://img.php.cn/upload/ai_manual/000/969/633/68b6d1929f7e6475.png" alt="Phenaki">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/1739">Phenaki</a>
                            <p>phenaki是一种从文本生成视频的模型</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="Phenaki">
                                <span>93</span>
                            </div>
                        </div>
                        <a href="/ai/1739" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="Phenaki">
                        </a>
                    </div>
                <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
            <p>222222222222222</p>
            <p>333333333333333</p>
            <p>4444444444444444</p>
            <p>1111111111111111</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
            <p>222222222222222</p>
            <p>333333333333333</p>
            <p>4444444444444444</p>
        </div>
    </div>
</div>

登录后复制

css部分

<style>
    div{
        font-size: 15px;
        margin-bottom: 20px;
    }
    .content{
        height: 300px;v // 必须设定滚动部分的高度
        background-color: cadetblue;
        color: antiquewhite;
        overflow-x: hidden; /*x轴禁止滚动*/
        　　　　 overflow-y: scroll;/*y轴滚动*/
    }
    .content::-webkit-scrollbar {
        display: none;/*隐藏滚动条*/
    }
    p{
        margin-bottom: 30px;
        font-size: 17px;
        color: #333;
    }
</style>

登录后复制

　　或者如果需要修改滚动条样式使用下面样式

<style>
    div{
        font-size: 15px;
        margin-bottom: 20px;
    }
    .content{
        height: 300px;v // 必须设定滚动部分的高度
        background-color: cadetblue;
        color: antiquewhite;
        overflow-x: hidden; /*x轴禁止滚动*/
        　　　　 overflow-y: scroll;/*y轴滚动*/
    }
         .content::-webkit-scrollbar{ //设置滚动条宽高
             width:8px;
             height:8px
        }
         .content::-webkit-scrollbar-track{// 滚动条轨道样式
              -webhit-box-shadow: inset 0 0 5px transparent;
              border-radius:0;
              background:transparent;
         }
         .content::-webkit-scrollbar-thumb{//滚动条样式
            border-radius:5px;
            -webkit-box-shadow:inset 0 0 5px #242B56;
            background:#242B56;  
         }
    p{
        margin-bottom: 30px;
        font-size: 17px;
        color: #333;
    }
</style>

登录后复制

【推荐学习：css视频教程】

以上就是css怎么隐藏div滚动条的详细内容，更多请关注php中文网其它相关文章！