隐藏滚动条css3实现滚动同时隐藏滚动条

最新推荐文章于 2024-06-20 15:42:34 发布

.NET跨平台

最新推荐文章于 2024-06-20 15:42:34 发布

阅读量228

点赞数

分类专栏： HTML5+CSS|CSS3

原文链接：https://blog.csdn.net/WuLex

版权

HTML5+CSS|CSS3 专栏收录该内容

153 篇文章 10 订阅

订阅专栏

项目场景需求要在局部实现滚动，但是滚动出现了滚动条，一瞬间感觉整个页面都不好了，经过努力css成功实现滚动同时隐藏滚动条，废话不多说，直接上代码

核心代码：

    ::-webkit-scrollbar{
        display:none;
    }

使用方法：设置滚动后在容器上添加该css样式；

    ul::-webkit-scrollbar{
        display:none;
    }

案例：

代码：

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>隐藏滚动条</title>
        <style>
            ul{
                margin: 50px auto;
                padding: 0;
                width:300px;
                height:400px;
                border:solid #000 2px;
                list-style: none;
            }
            li{
                line-height:48px;
                background: yellowgreen;
            }
            ul{
                overflow-x: hidden;
                overflow-y: scroll; 
            }
            ul::-webkit-scrollbar{
                display:none;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>测试隐藏滚动条</li>
            <li>测试隐藏滚动条</li>
            <li>测试隐藏滚动条</li>
            <li>测试隐藏滚动条</li>
            <li>测试隐藏滚动条</li>
            <li>测试隐藏滚动条</li>
            <li>测试隐藏滚动条</li>
            <li>测试隐藏滚动条</li>
            <li>测试隐藏滚动条</li>
            <li>测试隐藏滚动条</li>
            <li>测试隐藏滚动条</li>
            <li>测试隐藏滚动条</li>
        </ul>
    </body>
    </html>

效果：
在这里插入图片描述

.NET跨平台

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
隐藏滚动条css3实现滚动同时隐藏滚动条

项目场景需求要在局部实现滚动，但是滚动出现了滚动条，一瞬间感觉整个页面都不好了，经过努力css成功实现滚动同时隐藏滚动条，废话不多说，直接上代码核心代码： ::-webkit-scrollbar{ display:none; }使用方法：设置滚动后在容器上添加该css样式； ul::-webkit-scrollbar{ display:none; }案例：代码： <!DOCTYPE html> <h
复制链接

扫一扫