uniapp隐藏右侧滚动条

隐藏右侧滚动条的方法

在UniApp中隐藏右侧滚动条可以通过CSS样式实现，适用于H5、小程序等平台。以下是几种常见的方法：

全局样式设置 在App.vue的全局样式中添加以下CSS代码，适用于所有页面：

::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  color: transparent;
}

单页面样式设置 在需要隐藏滚动条的页面样式（<style>标签）中添加：

.page-container {
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
}
.page-container::-webkit-scrollbar {
  display: none;
}

通过scroll-view组件控制 使用UniApp的scroll-view组件时，设置show-scrollbar属性为false：

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

注意事项

• iOS设备可能需要额外设置-webkit-overflow-scrolling: touch来保证滚动流畅
• 部分安卓机型需要同时设置width: 0和display: none
• 小程序平台可能需要使用特定API隐藏滚动条，如微信小程序的page-meta组件