uniapp开发微信小程序时scroll-view右侧滚动条不显示怎么办

在uniapp开发微信小程序时，遇到scroll-view组件右侧滚动条不显示的问题。代码中已经设置了scroll-y="true"和明确的高度，但在真机测试时滚动条始终不显示。尝试过调整样式和添加::-webkit-scrollbar相关CSS，仍然无效。请问如何让scroll-view在微信小程序中正常显示右侧滚动条？需要特定样式或兼容性写法吗？

2 回复

检查scroll-view的scroll-y属性是否设为true，并确保高度固定。若仍不显示，可能是样式问题，可尝试添加::-webkit-scrollbar样式强制显示滚动条。


在Uniapp开发微信小程序时，scroll-view 组件默认不显示滚动条。若需显示右侧滚动条，可通过以下方法实现：

解决方案：

  1. 设置 show-scrollbar 属性
    在 scroll-view 标签中添加 show-scrollbar 属性，并设为 true，仅支持显示纵向滚动条。

    <scroll-view scroll-y show-scrollbar="{{true}}" style="height: 300px;">
  <!-- 内容区域 -->
</scroll-view>

  2. 自定义滚动条样式（增强体验）
    通过CSS调整滚动条外观（仅支持部分样式，如颜色）：

    ::-webkit-scrollbar {
  width: 4px;
}
::-webkit-scrollbar-thumb {
  background-color: #c1c1c1; 
  border-radius: 2px;
}

    注意：微信小程序对自定义滚动条支持有限，部分样式可能不生效。

  3. 检查容器高度
    确保 scroll-view 设置了明确的高度（如 height: 300px），且内容高度超出容器，否则不会触发滚动。

常见问题排查：

  • 若仍未显示，检查是否因样式冲突导致滚动条被隐藏。
  • 确保使用 scroll-y 开启纵向滚动。

按以上步骤操作即可解决滚动条不显示的问题。

回到顶部