Html 从textarea中删除滚动条

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/19424887/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 14:32:14  来源:igfitidea点击:

Remove scrollbars from textarea

htmlscrolltextareascrollbaroverflow

提问by user2370460

Following up to my previous question (Add a scrollbar to a <textarea>) on how to always see the scrollbar in a <textarea>, I am now wondering how you would set it so that there is no scrollbar in the <textarea>, even when the text overflows. To scroll down with this, you would use the arrow keys or the mouse to navigate through the text.

继续我之前的问题(将滚动条添加到 <textarea>)关于如何始终在 a 中看到滚动条<textarea>,我现在想知道如何设置它以便<textarea>即使文本溢出也没有滚动条。要向下滚动,您可以使用箭头键或鼠标浏览文本。

How can I do this?

我怎样才能做到这一点?

回答by tinthetub

Try the following, not sure which will work for all browsers or the browser you are working with, but it would be best to try all:

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

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

Or

或者

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

...As suggested above

...如上所述

You can also try adding this, I never used it before, just saw it posted on a site today:

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

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

This last option would remove the ability to resize the textarea. You can find more information on the CSS resizeproperty here

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

回答by Dinder Logic

style="overflow: hidden"and style="resize: none"were the ones that did the trick.

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

回答by tintinator

For MS IE 10 you'll probably find you need to do the following:

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

-ms-overflow-style: none

See the following:

请参阅以下内容:

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

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

回答by N V R N SATISH

Give a class for eg: scrollto the textarea tag. And in the css add this property -

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

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

It worked for without missing the scroll part

它可以在不丢失滚动部分的情况下工作

回答by user12472501

Hide scroll bar, but while still being able to scroll using CSS

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

To hide the scrollbar use -webkit- because it is supported by major browsers (Google Chrome, Safari or newer versions of Opera). There are many other options for the other browsers which are listed below:

要隐藏滚动条,请使用 -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/

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

回答by SauerTrout

I was able to get rid of my scroll bar on the body of text by removing my max-height attribute of my class.

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