HTML中保留滚动效果，不显示滚动条

I'm pig

于 2022-08-08 17:37:48 发布

阅读量3.5k

点赞数 4

文章标签： html css css3

本文链接：https://blog.youkuaiyun.com/BambooStrip/article/details/126232096

版权

这篇博客介绍了两种在CSS中隐藏滚动条的方法。第一种是通过在滚动条所在元素外添加一个覆盖层，利用`overflow:hidden`实现隐藏。第二种方法是利用`::-webkit-scrollbar`伪元素将滚动条的显示属性设置为`none`，但这种方法不适用于IE浏览器。这两种技巧对于网页的视觉效果和布局优化具有实用价值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、覆盖隐藏

取巧的方法，原理是通过给滚动条所在块元素外嵌套一个块元素，调整边距，覆盖隐藏。

例如

第一步：给div外部创建一个同样大小的div。

    .box1 {
      width: 200px;
      height: 200px;
    }
    .box2{
      width: 100%;
      height: 100%;
    }

第二步：给父元素div设置超出部分遮挡，overflow: hidden;子元素div调整边距使其隐藏在父元素div之下即可。

    .box1 {
      width: 200px;
      height: 200px;
      overflow: hidden;
    }
    .box2{
      width: 100%;
      height: 100%;
      overflow-y: scroll;
      padding-left: 15px;
    }

注意：如果是给整个页面设置，可以父元素（html）子元素（body）

二、使用::-webkit-scrollbar设置displa属性none

    div{
      width: 200px;
      height:200px;
      overflow-y: scroll;
    }
    ::-webkit-scrollbar{
      display: none;
    }

注意：此方法在IE上不生效。