uniapp ios textarea复制文案后滚动阴影覆盖在其他元素上如何解决

在使用uniapp开发iOS应用时，遇到textarea复制文案后页面滚动出现阴影覆盖在其他元素上的问题，应该如何解决？

2 回复

在textarea外层套一个scroll-view，并设置高度固定。或者使用uni-popup弹窗组件来显示textarea，避免层级问题。


在UniApp中，iOS设备上textarea复制文本后滚动时出现阴影覆盖其他元素的问题，通常是由于iOS系统默认的滚动阴影（如-webkit-overflow-scrolling: touch）引起的。可以通过以下CSS方法解决：

  1. 禁用iOS滚动阴影：
    为textarea添加CSS样式，禁用iOS特有的滚动效果阴影。

    textarea {
  -webkit-overflow-scrolling: auto !important;
}

  2. 重置滚动样式：
    如果问题仍然存在，可以尝试重置滚动条和阴影相关属性。

    textarea {
  overflow: auto;
  -webkit-overflow-scrolling: auto;
  background-attachment: local; /* 可选，改善滚动体验 */
}

  3. 检查层级和布局：
    确保textarea的父元素没有设置overflow: hidden或z-index异常，避免布局冲突。

完整示例代码：
在UniApp的vue文件或全局样式中添加：

<style>
textarea {
  -webkit-overflow-scrolling: auto !important;
  overflow: auto;
}
</style>

注意事项：

  • 使用!important确保样式优先级。
  • 测试不同iOS版本，部分旧版本可能仍需调整。
  • 如果涉及嵌套滚动，需检查父容器样式。

通过以上方法，通常可以解决iOS中textarea复制后滚动阴影覆盖的问题。

回到顶部