uniapp textarea无法滚动怎么解决？

在uniapp开发中，textarea组件出现无法滚动的问题该如何解决？设置了height或max-height后内容超出却不显示滚动条，尝试过添加scroll-y="true"属性仍无效，是否有其他解决方案或需要检查的配置项？

2 回复

给textarea添加scroll-y属性，并设置固定高度即可解决。例如：

<textarea scroll-y style="height: 200rpx"></textarea>

如果内容超出高度，就能正常滚动了。


在uni-app中，textarea组件无法滚动通常是由于样式或层级问题导致的。以下是几种常见解决方案：

1. 检查并设置textarea样式 确保textarea有固定高度和正确的overflow属性：

.textarea-class {
  height: 200rpx;
  overflow-y: auto;
}

2. 使用scroll-view包裹（推荐）

<scroll-view scroll-y="true" style="height: 300rpx">
  <textarea placeholder="请输入内容"></textarea>
</scroll-view>

3. 检查父容器样式 确保父元素没有设置overflow: hidden，否则会截断滚动。

4. 平台差异处理

  • 在H5端，可能需要添加-webkit-overflow-scrolling: touch增强滚动体验
  • 在小程序端，确保基础库版本支持textarea滚动

5. 使用官方示例代码

<template>
  <view class="content">
    <textarea 
      class="textarea"
      placeholder="请输入内容"
      :show-confirm-bar="false"
      cursor-spacing="20"
    ></textarea>
  </view>
</template>

<style>
.textarea {
  width: 100%;
  height: 300rpx;
  padding: 20rpx;
  background: #f5f5f5;
}
</style>

如果以上方法仍不生效，请检查是否在textarea上绑定了@touchmove等阻止默认滚动行为的事件。

回到顶部