网页大屏css隐藏横向纵向滚动条

最新推荐文章于 2025-07-25 10:25:19 发布

原创最新推荐文章于 2025-07-25 10:25:19 发布 · 799 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #html

前端同时被 3 个专栏收录

4 篇文章

订阅专栏

4 篇文章

订阅专栏

前端vue

3 篇文章

订阅专栏

在开发H5大屏页面时遇到右侧滚动条显示的问题，通过CSS样式设置`overflow-x:hidden`和`overflow-y:hidden`可隐藏滚动条，但同时使用`overflow-y:scroll`确保内容仍可滚动。对于Webkit浏览器，还可以利用`::-webkit-scrollbar`隐藏滚动条。这样既保持了页面美观，又保留了滚动功能。

再写h5网页大屏时候遇到了右侧出现滚动条的现象，这时候就会需要隐藏滚动条，但是还得保留可以滚动的功能。

其实很简单，自己在写的时候是用下面的一段代码搞定：

html,body{
    width: 100%;
    height: 100%;
    background:url("../static/img/bg.jpg")no-repeat;
    /* background-size: 100% ; */
    overflow-x:hidden; 
    overflow-y:hidden;
    overflow-y: scroll;
	
}
::-webkit-scrollbar{ 
    display: none;
   /* background-color:transparent; */
}