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

在uniapp开发小程序时，如何隐藏页面自带的滚动条？我在某些页面不需要滚动条显示，但默认样式会显示灰色滚动条。尝试过设置CSS属性::-webkit-scrollbar {display:none}，但在部分安卓机型上无效。请问有没有兼容性更好的解决方案？最好能适用于所有小程序平台。

2 回复

在 pages.json 中设置对应页面的 style：

{
  "path": "pages/index/index",
  "style": {
    "navigationBarTitleText": "首页",
    "disableScroll": true
  }
}

或全局禁用：

"globalStyle": {
  "disableScroll": true
}

注意：禁用后页面无法滚动。


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

方法一：全局样式设置（推荐） 在 App.vue 的全局样式中添加：

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

方法二：单个页面样式设置 在具体页面的 <style> 标签中添加：

/* 隐藏当前页面滚动条 */
page {
  overflow: hidden;
}

方法三：scroll-view组件替代 如果页面需要局部滚动，建议使用scroll-view组件：

<scroll-view scroll-y="true" :show-scrollbar="false" style="height: 100vh;">
  <!-- 页面内容 -->
</scroll-view>

注意事项：

  1. 方法一会影响所有页面的滚动条显示
  2. 方法二可能导致页面无法滚动
  3. 如果页面需要滚动功能，推荐使用方法三的scroll-view方案
  4. 部分平台可能需要额外配置，建议真机测试效果

根据实际需求选择合适的方法即可。

回到顶部