javascript - 在小程序view上设置overflow:scroll可以滑动但没有显示滚动条？

Question

<view class="list">
  <view class="item"></view>
<view>
.list{
  height: 750rpx;
  overflow: scroll;
}
.item{
  height: 1000px;
}

在小程序view上设置overflow:scroll可以滑动但没有显示滚动条,用户没有一眼看到可不可以滚动，想实现他默认就显示滚动条的功能，该如何实现？

Answer 1

在小程序中，特别是像微信小程序这样的平台，overflow: scroll; 确实可以使得内容在超出容器大小时可滑动，但默认情况下并不显示滚动条。这是因为小程序设计之初就倾向于简洁的界面，减少了滚动条的显示以避免干扰用户视觉。

不过，小程序框架（如微信小程序）并没有直接提供在CSS中控制滚动条显示与否的属性，因为这不是HTML/CSS标准的一部分，而是特定平台（如浏览器）的实现。

解决方案

虽然无法直接通过CSS控制滚动条的显示，但你可以采取以下几种方法来提示用户内容是可滚动的：

1. 使用阴影或渐变效果：
   在.list容器的底部或侧面添加一些阴影或渐变效果，以模拟滚动条的存在，从而给用户一个视觉上的提示。
2. 增加内容提示：
   在内容的顶部或底部添加文本提示，如“向上滑动查看更多”或“向下滑动查看更多”。
3. 自定义组件：
   如果上述方法不满足需求，你可以考虑开发一个自定义的滚动组件，这个组件可以包含自定义的滚动条样式。但请注意，这可能需要你处理滚动事件的监听和滚动条位置的同步更新，复杂度较高。
4. 利用现有库：
   检查是否有可用的第三方库或框架，它们可能已经实现了带滚动条的滚动容器。但请注意，使用第三方库可能会增加项目的复杂性和维护成本。
5. 平台特性：
   考虑到不同小程序平台（如微信小程序、支付宝小程序等）的特性和限制可能不同，建议查阅你所使用平台的官方文档，看是否有相关的API或组件可以满足你的需求。
6. 用户教育：
   在应用的UI设计中，通过其他方式（如动画、交互设计等）教育用户如何与你的应用交互，包括如何滚动查看更多内容。

由于小程序平台的限制，实现默认显示滚动条的功能可能需要一些创造性的解决方案。在设计时，请务必考虑用户体验和应用的整体风格。