页面超出部分滚动,但不显示滚动条

最新推荐文章于 2024-06-12 07:30:00 发布

麦兜:)

最新推荐文章于 2024-06-12 07:30:00 发布

阅读量5.9k

点赞数

分类专栏：前端开发文章标签： html css3

本文链接：https://blog.csdn.net/qq_40544291/article/details/102804135

版权

前端开发专栏收录该内容

36 篇文章 0 订阅

订阅专栏

效果如下:
在这里插入图片描述
最初看到这效果,是在pc端的知乎登录页.所以就去百度了方法.
注意:利用 css 3 的新特性 -webkit-scrollbar, 但是这种方式不兼容火狐和 IE

代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>超出部分隐藏滚动条</title>
</head>
<style type="text/css">
    #box {
        width: 500px;
        height: 300px;
        overflow-x: hidden;
        overflow-y: scroll;
        line-height: 30px;
        text-align: center;
    }
    #box::-webkit-scrollbar {
        display: none;
    }
</style>
<body>
    <!-- 兼容所有浏览器的超出部分滚动不显示滚动条 -->
    <div id="box">
        麦兜 </br>你好 </br>
        麦兜 </br>你好 </br>
        麦兜 </br>你好 </br>
        麦兜 </br>你好 </br>
        麦兜 </br>你好 </br>
        麦兜 </br>你好 </br>
        麦兜 </br>你好 </br>
        麦兜 </br>你好 </br>
        麦兜 </br>你好 </br>
        麦兜 </br>你好 </br>
        麦兜 </br>你好 </br>
        麦兜 </br>你好 </br>
    </div>
</body>
</html>

在这里插入图片描述

麦兜:)

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
页面超出部分滚动,但不显示滚动条

效果如下:最初看到这效果,是在pc端的知乎登录页.所以就去百度了方法.注意:利用 css 3 的新特性 -webkit-scrollbar, 但是这种方式不兼容火狐和 IE代码如下:<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>超出部分...
复制链接

扫一扫

专栏目录