从textarea中删除滚动条

时间:2013-10-17 11:01:29

标签: html scroll textarea scrollbar overflow

关于如何始终在<textarea>中查看滚动条的上一个问题(Add a scrollbar to a <textarea>),我现在想知道如何设置它以便{{1}中没有滚动条1}},即使文本溢出。要向下滚动,可以使用箭头键或鼠标在文本中导航。

我该怎么做?

7 个答案:

答案 0 :(得分:114)

尝试以下操作,不确定哪个适用于所有浏览器或您使用的浏览器,但最好全部尝试:

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

或者

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

......如上所述

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

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

最后一个选项会删除调整textarea大小的功能。您可以在CSS resize属性here

中找到更多信息

答案 1 :(得分:10)

style="overflow: hidden"style="resize: none"就是那个伎俩。

答案 2 :(得分:9)

对于MS IE 10,您可能会发现需要执行以下操作:

-ms-overflow-style: none

请参阅以下内容:

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

答案 3 :(得分:6)

将例如:scroll的类提供给textarea标记。并在CSS中添加此属性 -

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

它没有错过滚动部分

答案 4 :(得分:3)

隐藏滚动条,但仍可以使用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; }

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

答案 5 :(得分:0)

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

答案 6 :(得分:0)

为 Mozilla 隐藏滚动条。

  overflow: -moz-hidden-unscrollable;