uniapp微信小程序如何隐藏右侧滑动时的滚动条

在开发uniapp微信小程序时，如何隐藏页面右侧滑动时出现的滚动条？试过一些CSS方法但没效果，有没有人知道具体的解决方案？

2 回复

在uni-app中，可以通过在对应页面的style中添加CSS样式来隐藏滚动条：

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

这样就能隐藏微信小程序的滚动条了。


在 UniApp 中隐藏微信小程序右侧滚动条，可以通过以下方法实现：

方法一：全局样式设置

在 App.vue 的全局样式中添加以下 CSS 代码：

/* 隐藏整个小程序的滚动条 */
::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  color: transparent;
}

方法二：页面单独设置

在需要隐藏滚动条的页面样式（.vue 文件的 <style> 标签）中添加：

/* 隐藏当前页面滚动条 */
page {
  -webkit-overflow-scrolling: touch; /* 保持流畅滚动 */
}
::-webkit-scrollbar {
  display: none;
}

注意事项：

  1. 微信小程序中部分组件（如 scroll-view）需要单独设置：
/* 针对 scroll-view 组件 */
scroll-view ::-webkit-scrollbar {
  display: none;
}
  1. 确保代码在真机测试，开发者工具可能显示差异。

推荐方案：

建议在 App.vue 中全局设置，一劳永逸。如果个别页面需要保留滚动条，可在页面样式中使用 display: block 覆盖。

回到顶部