从textarea移除滚动条


82

继续我的上一个问题(将滚动条添加到<textarea>中),该问题如何始终显示a中的滚动条<textarea>,我现在想知道如何设置它,以便<textarea>即使文本溢出也不会在其中显示滚动条。要向下滚动,可以使用箭头键或鼠标在文本中导航。

我怎样才能做到这一点?


4
你尝试了<textarea style="overflow:hidden"></textarea>吗?
andyb

Answers:


136

尝试以下操作,不确定是否适用于所有浏览器或正在使用的浏览器,但最好尝试全部操作:

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

要么

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

...如上所述

您也可以尝试添加它,我以前从未使用过,只是今天看到它发布在网站上:

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

最后一个选项将删除调整大小的功能textarea。您可以在此处找到有关CSSresize属性的更多信息


5
textarea_element.style.overflow =“隐藏”; (在Firefox 44.0中工作)
AAAfarmclub '16

这种方法隐藏了滚动条,但是如果您的内容很大,它将不再滚动。
瓦诺




7

scrolltextarea标记一个类,例如:并在CSS中添加此属性-

.scroll::-webkit-scrollbar {
   display: none;
 }
<textarea class='scroll'></textarea>

它的工作原理没有丢失滚动部分


6

隐藏滚动条,但仍可以使用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-being-able-to-scroll-using-css/


0

通过删除班级的max-height属性,我可以摆脱文本正文上的滚动条。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.