如何隐藏textarea滚动条同时保留鼠标滚轮滚动功能？

你遇到的问题大概率是隐藏滚动条时错误禁用了滚动机制，比如用了overflow: hidden。以下是既能隐藏滚动条又保留滚轮滚动功能的CSS方案：

跨浏览器兼容写法 #

textarea {
  /* 核心：保留滚动机制，内容超出时允许滚动 */
  overflow: auto;
  /* Firefox 隐藏滚动条 */
  scrollbar-width: none;
  /* IE/Edge 隐藏滚动条 */
  -ms-overflow-style: none;
}

/* Chrome、Safari、Opera 等WebKit内核浏览器隐藏滚动条 */
textarea::-webkit-scrollbar {
  display: none;
}

关键说明 #

• 必须保留overflow: auto（或overflow: scroll），这是让textarea支持滚轮滚动的基础，overflow: hidden会直接禁用所有滚动行为。
• 不同浏览器的滚动条隐藏语法不同，需要同时添加多端兼容代码，才能覆盖主流浏览器。

替代方案（父容器裁剪法） #

如果上述伪元素写法不满足需求，还可以用父容器裁剪的方式隐藏滚动条：

.textarea-wrap {
  width: 200px;
  overflow: hidden;
}

.textarea-wrap textarea {
  width: calc(100% + 18px); /* 多出的宽度用来容纳滚动条，被父容器裁剪 */
  overflow: auto;
  border: none;
}

这种方式通过让textarea的宽度超出父容器，把滚动条隐藏在父容器的可视区域外，同时textarea本身保持滚动功能，滚轮依然可用。

内容的提问来源于stack exchange，提问作者lex_noob-for_now