如何在不需要时隐藏垂直滚动条

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;
}

3 个解决方案

#1

147

overflow: auto (or overflow-y: auto) is the correct way to go.

溢流:自动(或过流-y:自动)是正确的方式。

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 159px it won't start scrolling until the text is taller than 400px which is the height of the textbox.

问题是,你的文本区域比你高div。div最终切断文本框,所以即使它看起来应该开始滚动文本比159 px高的时候才开始滚动的文本比400 px高文本框的高度。

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.

我在文本框中设置了overflow:auto，并将文本框设置为与div相同的大小。

Also I don't believe it's valid to have a div inside a label, the browser will render it, but it might cause some funky stuff to happen. Also your div isn't closed.

我也不相信在标签中有div是有效的，浏览器会渲染它，但它可能会导致一些奇怪的事情发生。你的div还没有关闭。

#2

overflow: auto; or overflow: hidden; should do it I think.

溢出:汽车;或溢出:隐藏;我想应该这样做。

#3

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 如何在不需要时隐藏垂直滚动条

我已经附上了图片，你可以看到上面代码的输出

#1

147