【问题标题】:Remove scrollbars from textarea从 textarea 中删除滚动条
【发布时间】:2013-10-25 20:02:12
【问题描述】:

继我之前的问题 (Add a scrollbar to a <textarea>) 关于如何始终在 &lt;textarea&gt; 中看到滚动条之后,我现在想知道您将如何设置它以使 &lt;textarea&gt; 中没有滚动条,即使当文本溢出。要向下滚动,您可以使用箭头键或鼠标在文本中导航。

我该怎么做?

【问题讨论】:

  • 你试过&lt;textarea style="overflow:hidden"&gt;&lt;/textarea&gt;吗?

标签: html scroll textarea scrollbar overflow


【解决方案1】:

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

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

或者

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

...如上所述

你也可以试试加这个,以前没用过,今天才看到贴在一个网站上:

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

最后一个选项将取消调整textarea 大小的功能。您可以在 CSS resize 属性 here 上找到更多信息

【讨论】:

【解决方案2】:

style="overflow: hidden"style="resize: none" 做到了这一点。

【讨论】:

  • 这到底是怎么回事?
【解决方案3】:

为 textarea 标签指定一个类,例如:scroll。并在 css 中添加此属性 -

.scroll::-webkit-scrollbar {
   display: none;
 }
&lt;textarea class='scroll'&gt;&lt;/textarea&gt;

它在没有错过滚动部分的情况下工作

【讨论】:

  • 完美,您可以滚动但不显示滚动条。正是我需要的。谢谢。
【解决方案4】:

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

-ms-overflow-style: none

请参阅以下内容:

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

【讨论】:

  • 这个。似乎没有其他东西适用于 IE10。很棒的东西。
【解决方案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/

【讨论】:

    【解决方案6】:

    隐藏 Mozilla 的滚动条。

      overflow: -moz-hidden-unscrollable;
    

    【讨论】:

      【解决方案7】:

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

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2012-04-22
        • 1970-01-01
        • 2015-05-31
        • 1970-01-01
        • 2016-08-09
        • 2013-07-24
        • 1970-01-01
        • 2023-01-04
        相关资源
        最近更新 更多