在 textarea 上启用垂直滚动答案

【问题标题】：Enable vertical scrolling on textarea在 textarea 上启用垂直滚动
【发布时间】：2012-01-24 17:51:02
【问题描述】：

我有一个要启用垂直滚动的文本区域。当我超过文本区域的高度时，它的大小会增加。滚动条不出现。我希望出现一个垂直滚动条，并且用户也无法调整文本区域的大小。

我在网上搜索并尝试了发布的解决方案，但似乎没有一个有效。

CSS：

#imageURLId{
font-size: 14px;
font-weight: normal;
resize: none;
overflow-y: scroll;
}

HTML：

<label for="aboutDescription" id="aboutHeading">About</label>
<textarea rows="15" cols="50" id="aboutDescription"
    style="resize: none;"></textarea>
<a  id="imageURLId" target="_blank">Go to
    HomePage</a>

【问题讨论】：

您正在使用 jQuery 移动版。滚动条在移动设备上有点烦人（特别是支持触控的）。

标签： html css

【解决方案1】：

您可以尝试添加：

#aboutDescription
{
    height: 100px;
    max-height: 100px;  
}

【讨论】：

@MikeChristensen：Safari 5.1.2 (Mac OS)
@MikeChristensen：为#aboutDescription 更改它是有效的。我犯了一个愚蠢的错误。感谢您的帮助。
@Hozefa - 很高兴听到。至于强制它使用 15 行但不允许调整大小，我不确定你是否可以这样做。如果没有 CSS 固定高度，即使使用 resize:none;，它似乎也只是根据需要调整大小 - 我想您必须将行高转换为像素。
确保您没有在 textarea 上使用 white-space:nowrap 样式。您可能希望将其显式设置为 white-space:normal。

【解决方案2】：

这是你的 CSS

element{
  width: 200px;
  height: 300px;
  overflow-y: auto;
}

【讨论】：

【解决方案3】：

简单，改变

<textarea rows="15" cols="50" id="aboutDescription"
style="resize: none;"></textarea>

到

<textarea rows="15" cols="50" id="aboutDescription"
style="resize: none;" data-role="none"></textarea>

即，添加：

data-role="none"

【讨论】：

【解决方案4】：

试试这个：http://jsfiddle.net/8fv6e/8/

这是另一个版本的答案。

HTML：

<label for="aboutDescription" id="aboutHeading">About</label>
<textarea rows="15" cols="50" id="aboutDescription"
    style="max-height:100px;min-height:100px; resize: none"></textarea>
<a  id="imageURLId" target="_blank">Go to
    HomePage</a>

CSS：

#imageURLId{
font-size: 14px;
font-weight: normal;
resize: none;
overflow-y: scroll;

}

【讨论】：

【解决方案5】：

也许是固定的height 和overflow-y: scroll;

【讨论】：