uniapp安卓和h5输入框textarea如何显示滚动条

在uniapp开发中，安卓和H5端的textarea输入框无法显示滚动条，即使内容超出高度也不出现滚动条。请问如何让textarea在内容超出时正常显示滚动条？需要设置特定的CSS样式还是使用其他解决方案？

2 回复

uniapp中，textarea默认无滚动条。可在textarea外层包裹scroll-view组件，设置高度和scroll-y属性实现滚动。或使用CSS设置textarea的overflow-y: scroll强制显示滚动条。


在UniApp中，要让textarea组件在Android和H5端显示滚动条，可以通过CSS样式控制。以下是实现方法：

1. 设置textarea样式

.textarea-style {
  height: 200rpx; /* 固定高度 */
  overflow: auto; /* 关键属性：超出时显示滚动条 */
  -webkit-overflow-scrolling: touch; /* H5端平滑滚动 */
}

2. 页面中使用

<textarea class="textarea-style" placeholder="请输入内容"></textarea>

注意事项：

  • 必须设置固定高度（如height或max-height）才能触发滚动条
  • H5端可能需要-webkit-overflow-scrolling: touch来优化滚动体验
  • 在部分Android设备上，可能需要额外设置：
.textarea-style {
  overflow-y: scroll; /* 强制显示垂直滚动条 */
  white-space: pre-wrap; /* 保持文本换行 */
}

完整示例：

<template>
  <view>
    <textarea 
      class="scroll-textarea"
      placeholder="输入内容查看滚动条"
      v-model="text"
    ></textarea>
  </view>
</template>

<style>
.scroll-textarea {
  width: 100%;
  height: 300rpx;
  padding: 20rpx;
  border: 1px solid #ddd;
  border-radius: 10rpx;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
</style>

通过以上设置，当输入内容超出可视区域时，Android和H5端都会显示滚动条。

回到顶部