html，小程序scroll-view去除滚动条

weixin_46465090

已于 2024-11-11 14:55:51 修改

阅读量881

点赞数 2

分类专栏：小程序清除默认样式文章标签： html 小程序

于 2020-04-17 19:59:47 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_46465090/article/details/105586939

版权

小程序同时被 2 个专栏收录

6 篇文章

订阅专栏

清除默认样式

1 篇文章

订阅专栏

本文介绍了在HTML和小程序中去除滚动条的方法。在HTML中，可以通过设置父元素`overflow:hidden`和子元素的特定宽度来实现视觉隐藏，或者利用`-webkit-scrollbar`属性在Chrome等浏览器中隐藏滚动条。而在小程序中，只需在wxss中添加`::-webkit-scrollbar`样式，将宽度和高度设为0即可隐藏scroll-view的滚动条。

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

进入正题，有时候在项目中，需求不想要某些滚动条怎么办呢？
首先看HTML解决滚动条的方法。
方法1.父盒子overflow:hidden 子盒子比父盒子宽17 实现视觉隐藏滚动条（为什么是17px呢，因为自己测了下，滚动条宽度就是17px）
子盒子添加内容溢出滚动条显示属性 overflow-y:scroll 并设置好宽高可实现隐藏滚动条也可是滚轮触发滑动，使用此方法无法监听window的滚动条事件。
代码示例：

    .box{
      width:300px;
      height: 400px;
      overflow: hidden;
    } 
    .box>div{
      width: calc(100% + 17px);
      overflow-y: scroll
    }
    .header{
      height: 80px;
      background-color: antiquewhite;
    }
    .content{
      height: 420px;
      background-color: aquamarine;
    }  
  HTML 代码
  <div class="box">
    <div class="header">
      头部
    </div>
    <div class="content">
      身体
    </div>
  </div>

效果图：
在这里插入图片描述
方法2. 利用 css 3 的新特性 -webkit-scrollbar, 但是这种方式不兼容火狐和 IE 如：
#box {
width: 500px;
height: 300px;
overflow-x: hidden;
overflow-y: scroll;
line-height: 30px;
text-align: center;
}
#box::-webkit-scrollbar {
display: none;
}
代码示例：

CSS代码
    .box{
      width:300px;
      height: 400px;
      overflow-x: hidden;
      overflow-y: scroll;
    } 
    .box::-webkit-scrollbar {
        display: none;
    }
    .header{
      height: 80px;
      background-color: antiquewhite;
    }
    .content{
      height: 420px;
      background-color: aquamarine;
    }  
  HTML 代码
  <div class="box">
    <div class="header">
      头部
    </div>
    <div class="content">
      身体
    </div>
  </div>

效果图：
在这里插入图片描述
以上是HTML我所知道的隐藏滚动条方法

小程序scroll-view隐藏滚动条方法
这个就比较简单了，直接再wxss中加上这条属性
wxss：
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
代码示例：

**wxss**
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}

这样就可以隐藏scroll-view的滚动条了，这个我就不好做效果图了，弄一个gif或者视频挺麻烦的，正常截图可能会有人说：你截图的时候滚动条就消失了吧。

以上是隐藏滚动条的方法希望能帮到大家。