uniapp微信小程序如何去掉页面滚动条

在uniapp开发的微信小程序中，页面右侧总是出现滚动条，影响整体美观。尝试了CSS设置::-webkit-scrollbar { display: none }也没效果。请问该如何彻底隐藏滚动条？需要兼容不同机型。

2 回复

在uniapp微信小程序中，可以通过在对应页面的style中添加以下CSS来隐藏滚动条：

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

这样就能去掉页面的滚动条了。


在 UniApp 微信小程序中，可以通过以下方法隐藏页面滚动条：

方法一：全局配置（推荐）

在 pages.json 中针对具体页面或全局设置：

{
  "globalStyle": {
    "navigationBarTitleText": "App",
    "enablePullDownRefresh": false,
    "app-plus": {
      "scrollIndicator": "none" // 隐藏滚动条
    }
  },
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "enablePullDownRefresh": false,
        "app-plus": {
          "scrollIndicator": "none"
        }
      }
    }
  ]
}

方法二：页面样式设置

在页面的 <style> 中添加：

/* 隐藏滚动条 */
::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  color: transparent;
}

方法三：使用 scroll-view 组件

如果页面使用 scroll-view，可设置属性：

<scroll-view scroll-y="true" :show-scrollbar="false">
  <!-- 内容 -->
</scroll-view>

注意事项：

  1. 微信小程序默认隐藏滚动条，通常无需特别处理
  2. 如果内容未超出页面高度，不会出现滚动条
  3. 在 iOS 和 Android 上表现可能略有差异

推荐优先使用方法一进行全局配置，这样能保持整个应用风格统一。

回到顶部