从textarea中删除滚动条

use*_*460 74 html scroll textarea overflow scrollbar

按照我之前的问题(添加一个滚动条到<textarea>)关于如何总是看到一个滚动条<textarea>,我现在想知道如何设置它,以便<textarea>即使文本溢出也没有滚动条.要向下滚动,可以使用箭头键或鼠标在文本中导航.

我怎样才能做到这一点?

tin*_*tub 121

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

<textarea style="overflow:auto"></textarea>
Run Code Online (Sandbox Code Playgroud)

要么

<textarea style="overflow:hidden"></textarea>
Run Code Online (Sandbox Code Playgroud)

......如上所述

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

<textarea style="resize:none"></textarea>
Run Code Online (Sandbox Code Playgroud)

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

  • textarea_element.style.overflow ="hidden"; (在Firefox 44.0中工作) (5认同)
  • 这种方法隐藏了滚动条,但如果您的内容很大,它就不会再滚动。 (2认同)

小智 11

style="overflow: hidden"style="resize: none"为实现该诀窍的人.

  • 究竟这不是一个答案? (11认同)

小智 9

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

-ms-overflow-style: none
Run Code Online (Sandbox Code Playgroud)

请参阅以下内容:

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


小智 7

隐藏滚动条,但仍然可以使用 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; }
Run Code Online (Sandbox Code Playgroud)

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


小智 6

为例如:scrolltextarea标签提供一个类.并在CSS中添加此属性 -

.scroll::-webkit-scrollbar {
   display: none;
 }
Run Code Online (Sandbox Code Playgroud)

它工作没有错过滚动部分

  • 这不兼容跨浏览器,例如在 Firefox 中不兼容。 (3认同)