从文本区域中移除滚动条

Question

在我的上一个问题（如何在 <textarea> 中添加滚动条）的基础上，我现在想知道如何设置 <textarea>，即使文本溢出也不会出现滚动条。要向下滚动，您可以使用箭头键或鼠标浏览文本。

我该怎么做？

- user2370460

---

你尝试过使用<textarea style="overflow:hidden"></textarea>吗？ - andyb

Answer 1

尝试以下方法，不能确定哪种方法适用于所有浏览器或您正在使用的浏览器，但最好尝试所有方法：

<textarea style="overflow:auto"></textarea>

或者

<textarea style="overflow:hidden"></textarea>

如上所建议的那样

您还可以尝试添加这个，我以前从未使用过，只是今天在一个网站上看到它发布的：

<textarea style="resize:none"></textarea>

这最后一种选项会取消改变 textarea 大小的功能。你可以在此处了解有关 CSS resize 属性的更多信息。

- tinthetub

---

文本框元素.style.overflow = "hidden"; （在Firefox 44.0中有效） - AAAfarmclub

这种方法隐藏了滚动条，但如果你的内容很大，它就不能再滚动了。 - Vano

结合 https://dev59.com/rrbna4cB1Zd3GeqPeKAu - Jens Mander

textarea { overflow:hidden; }在CSS中对我有效。 - Muneeb Ejaz

Answer 2

style="overflow: hidden"和style="resize: none"是起作用的那些。

- Dinder Logic

---

这到底不是回答的原因是什么？ - Robbo

Answer 3

给一个类例如：scroll 给文本区域标签（即textarea）加上该类。在CSS中添加以下属性 -

.scroll::-webkit-scrollbar {
   display: none;
 }

<textarea class='scroll'></textarea>

它在没有遗漏滚动部分的情况下成功运行。

- N V R N SATISH

---

完美，你可以滚动但是滚动条没有出现。正是我所需要的。谢谢。 - Gorby Oz

这不是跨浏览器兼容的，例如它在Firefox中无法运行。 - Raj Narayanan

Answer 4

对于MS IE 10，您可能需要执行以下操作：

-ms-overflow-style: none

请查看以下内容：

https://msdn.microsoft.com/zh-cn/library/hh771902(v=vs.85).aspx

- tintinator

---

这个。似乎其他的方法都不适用于IE10。太棒了。 - Jimbo Jonny

Answer 5

使用CSS隐藏滚动条，但仍然可以滚动。

要隐藏滚动条，请使用-webkit-，因为它被主要浏览器支持（Google Chrome、Safari或新版本的Opera）。其他浏览器还有许多其他选项，下面列出了这些选项：

    -webkit- (Chrome, Safari, newer versions of Opera):
    .element::-webkit-scrollbar { width: 0 !important }
    -moz- (Firefox):
    .element { overflow: -moz-scrollbars-none; }
    -ms- (Internet Explorer +10):
    .element { -ms-overflow-style: none; }

参考: https://www.geeksforgeeks.org/hide-scroll-bar-but-while-still-being-able-to-scroll-using-css/

- FarzadJamshidi

---

在火狐浏览器中无法工作。 - NickW

.scrollable {overflow: hidden;} .scrollable::-webkit-scrollbar {display: none;} 可用于 Chrome 和 Firefox。 - NickW

Answer 6

隐藏Mozilla的滚动条。

  overflow: -moz-hidden-unscrollable;

- MustafaEminn

Answer 7

其他答案中提到的仅不显示滚动条的解决方案（而不是完全隐藏溢出）（请参见::-webkit-scrollbar）在Firefox中无法正常工作。此外，对于我来说，在Firefox中也没有使用“-moz-”特定的解决方案。

相反，请使用：

scrollbar-width: none;

适用于Firefox！

- GoldyOnline

Answer 8

我通过移除我的类的最大高度属性，成功地去掉了文本主体上的滚动条。

- SauerTrout

Answer 9

就像其他人提到的那样，隐藏滚动条而不影响滚动是预期的行为：https://blog.logrocket.com/hide-scrollbar-without-impacting-scrolling-css

- Patrick