uni-app开发的小程序时怎么去掉右侧滚动条？

发布于 1周前 作者 yuanlaile 来自 Uni-App

uni-app开发的小程序时怎么去掉右侧滚动条？

  1. 没有使用 scroll-view，页面是通过 onReachBottom 完成上拉加载功能，如果在最外层给个 height: 100%; overflow: auto; 确实可以隐藏滚动条但是却无法触发 onReachBottom

  2. 网上看的在 app.vue 使用 ::-webkit-scrollbar {width: 0px; height: 0px; color: transparent;} 基本就是没有效果，滚动条依然存在，在配置 "scrollIndicator": "none" 也无效。因为我是 uniapp 开发小程序，有大老给解决方案吗？感谢


Harmonyos Next教程
2 回复

同问，为什么这个问题没有人回答呢？


在开发uni-app小程序时，如果你希望去掉页面右侧的滚动条，可以通过自定义样式来实现。在uni-app中，你可以通过修改页面的全局样式或者局部样式来隐藏滚动条。以下是一些具体的方法，主要通过CSS样式来控制。

方法一：全局样式隐藏滚动条

你可以在App.vue或者某个页面的style标签中定义全局样式，通过CSS的::-webkit-scrollbar伪元素来隐藏滚动条。这种方法适用于整个应用或者特定页面。

<template>
  <view class="container">
    <!-- 页面内容 -->
  </view>
</template>

<style scoped>
/* 全局隐藏滚动条样式 */
::-webkit-scrollbar {
  display: none; /* Chrome, Safari 和 Opera */
}

.container {
  height: 100vh;
  overflow-y: auto; /* 确保内容可以滚动 */
}
</style>

方法二：针对特定组件隐藏滚动条

如果你只想隐藏某个特定组件的滚动条，可以给该组件添加特定的class，然后在样式中针对这个class进行定义。

<template>
  <view class="scrollable-container">
    <!-- 需要滚动的内容 -->
    <view v-for="item in items" :key="item">{{ item }}</view>
  </view>
</template>

<style scoped>
.scrollable-container {
  height: 300px; /* 固定高度 */
  overflow-y: auto; /* 允许垂直滚动 */
}

/* 隐藏滚动条样式 */
.scrollable-container::-webkit-scrollbar {
  display: none; /* Chrome, Safari 和 Opera */
}

/* 对于其他浏览器，如Firefox，可以使用以下方式，但支持情况可能有所不同 */
.scrollable-container {
  scrollbar-width: none; /* Firefox */
}
</style>

<script>
export default {
  data() {
    return {
      items: Array.from({ length: 50 }, (_, i) => `Item ${i + 1}`)
    };
  }
};
</script>

注意事项

  1. ::-webkit-scrollbar伪元素主要用于基于WebKit的浏览器（如Chrome、Safari）。对于其他浏览器，如Firefox，可以使用scrollbar-width属性，但需要注意兼容性。
  2. 隐藏滚动条后，用户仍然可以通过触摸或鼠标滚轮进行滚动，只是滚动条本身不可见。

通过上述方法，你可以在uni-app中有效地隐藏小程序页面的右侧滚动条，同时保持内容的可滚动性。

回到顶部