css实现隐藏滚动条，页面仍可滚动

最新推荐文章于 2024-01-18 19:34:15 发布

阿轲Jackson

最新推荐文章于 2024-01-18 19:34:15 发布

阅读量147

点赞数

分类专栏： html css 文章标签： html css

本文链接：https://blog.csdn.net/m0_46881781/article/details/115500507

版权

html 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

1、样式

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

2、效果图

[添加样式之前](https://img-blog.csdnimg.cn/20210408035756326.gif)

[添加链接描述](https://img-blog.csdnimg.cn/20210408035523588.gif)

3、完整实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>隐藏滚动条</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<style>
    .boxOffice{
        width: 300px; 
        height: 200px; 
        overflow: auto; 
        background-color: skyblue; 
        margin-left: 300px; 
        margin-top: 300px;
    }
    .boxOffice::-webkit-scrollbar{
        display: none;
    }
</style>
<body>
    <div class="boxOffice" style="">
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>电影名称</th>
                    <th>累计票房</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>我的姐姐</td>
                    <td>100亿元</td>
                </tr>
                <tr>
                    <td>我的姐姐</td>
                    <td>100亿元</td>
                </tr>
                <tr>
                    <td>我的姐姐</td>
                    <td>100亿元</td>
                </tr>
                <tr>
                    <td>我的姐姐</td>
                    <td>100亿元</td>
                </tr>
                <tr>
                    <td>我的姐姐</td>
                    <td>100亿元</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

阿轲Jackson

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css实现隐藏滚动条，页面仍可滚动

1、样式.boxOffice::-webkit-scrollbar{ display: none;}2、效果图![添加样式之前](https://img-blog.csdnimg.cn/20210408035756326.gif)![添加样式之后](https://img-blog.csdnimg.cn/20210408035523588.gif)3、实现<!DOCTYPE html><html lang="en"><head>
复制链接

扫一扫