Html 不需要时如何隐藏垂直滚动条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9560330/
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
how to hide a vertical scroll bar when not needed
提问by Lukus
I have a textarea which is contained in a div as I have jquery hint and wanted to use opacity without changing the border. There is a visible vertical scroll bar how I only want this displayed when I am typing in the text field and it goes beyond the container. I have tried overflow: auto; but does not work.
我有一个包含在 div 中的 textarea，因为我有 jquery 提示，并且想在不更改边框的情况下使用不透明度。有一个可见的垂直滚动条，我只希望在文本字段中输入时显示它，并且它超出了容器。我试过溢出：自动；但不起作用。
Textfield:
文本域：
<label>
<div id="name">
<textarea name="message" type="text" id="message"
title="Enter Message Here"
rows=9 cols=60 maxlength="2000"></textarea>
</div>
</label>
Styles:
款式：
#name {
border: 1px solid #c810ca;
width: 270px;
height:159px;
overflow: hidden;
position: relative;
}
#message {
height: 400px;
width: 235px;
overflow: hidden;
position: absolute;
}
回答by Davy8
overflow: auto(or overflow-y: auto) is the correct way to go.
overflow: auto(或overflow-y: auto) 是正确的方法。
The problem is that your text area is taller than your div. The div ends up cutting off the textbox, so even though it looks like it should start scrolling when the text is taller than 159pxit won't start scrolling until the text is taller than 400pxwhich is the height of the textbox.
问题是您的文本区域比您的 div 高。div 最终切断了文本框，所以即使它看起来应该在文本高于文本框时159px开始滚动，但在文本高于400px文本框的高度之前它不会开始滚动。
Try this: http://jsfiddle.net/G9rfq/1/
试试这个：http: //jsfiddle.net/G9rfq/1/
I set overflow:auto on the text box, and made the textbox the same size as the div.
我在文本框上设置了溢出：自动，并使文本框与 div 的大小相同。
Also I don't believe it's valid to have a divinside a label, the browser will render it, but it might cause some funky stuff to happen. Also your divisn't closed.
此外，我不相信在 adiv内部使用 a是有效的label，浏览器会呈现它，但它可能会导致一些时髦的事情发生。你的div也没有关闭。
回答by Boris Bachovski
overflow: auto;or overflow: hidden;should do it I think.
overflow: auto;或者overflow: hidden;我认为应该这样做。
回答by DareDevil
Add this class in .css class
在 .css 类中添加这个类
.scrol {
font: bold 14px Arial;
border:1px solid black;
width:100% ;
color:#616D7E;
height:20px;
overflow:scroll;
overflow-y:scroll;
overflow-x:hidden;
}
and use the class in div. like here.
并在 div 中使用该类。像这儿。
<div> <p class = "scrol" id = "title">-</p></div>
I have attached image , you see the out put of the above code
我附上了图片，你会看到上面代码的输出
