移动端Textarea滚动条不可见，如何实现可见效果？

在移动设备上操作textarea时无法看到滚动条，尝试多种启用方式仍未解决，以下是可行的解决方法：

你的现有代码 #

export default function App() {
  return (
    <div className="App">
      <textarea className="test" />
    </div>
  );
}

.test {
  height: 100px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.test::-webkit-scrollbar {
  width: 10px;
}

.test::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.test::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 5px;
}

@media (pointer: coarse) {
  .test {
    scrollbar-width: thin;
    scrollbar-color: red red;
  }
}

优化后的解决方案代码 #

针对移动端主流的WebKit内核浏览器（如iOS Safari、Chrome移动端），调整样式以确保滚动条可见：

.test {
  height: 100px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  resize: none; /* 禁止手动调整textarea大小，避免样式干扰 */
}

/* 适配WebKit内核浏览器（移动端主流） */
.test::-webkit-scrollbar {
  width: 10px;
  opacity: 1; /* 强制滚动条不透明，防止被系统默认隐藏 */
}

.test::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 5px;
}

.test::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 5px;
  border: 2px solid #f1f1f1; /* 增加边框，让滚动条在轨道中更醒目 */
}

/* 针对触摸设备的兼容处理 */
@media (pointer: coarse) {
  /* 确保WebKit滚动条始终可见 */
  .test::-webkit-scrollbar {
    opacity: 1;
  }
  /* Firefox移动端兼容 */
  .test {
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
  }
}

关键说明 #

1. WebKit内核适配：移动端多数浏览器基于WebKit，::-webkit-scrollbar系列伪元素是控制滚动条的核心，设置opacity:1可以避免iOS Safari等浏览器默认隐藏滚动条。
2. 样式优化：给滚动条滑块添加边框，能提升触摸设备上的视觉辨识度。
3. Firefox兼容：scrollbar-width和scrollbar-color是Firefox专属属性，仅作为补充兼容。
4. 注意系统行为：部分移动端浏览器（如iOS Safari）仍会在非滚动状态下隐藏滚动条，这是系统默认交互逻辑，原生样式无法完全强制一直显示，若需持久显示可考虑实现自定义模拟滚动条。

内容的提问来源于stack exchange，提问作者DevOverflow