Как скрыть вертикальную полосу прокрутки, когда не требуется

У меня есть textarea, который содержится в div, поскольку у меня есть подсказка jquery и вы хотите использовать непрозрачность без изменения границы. Существует видимая вертикальная полоса прокрутки, как только я хочу, чтобы это отображалось, когда я печатаю текстовое поле, и оно выходит за пределы контейнера. Я попробовал переполнение: auto; но не работает.

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>

Стили:

#name { 
    border: 1px solid #c810ca;
    width: 270px;
    height:159px;
    overflow: hidden; 
    position: relative;
    }

#message {
    height: 400px;
    width: 235px;
    overflow: hidden;
    position: absolute;
}

Ответ 1

overflow: auto (или overflow-y: auto) - правильный путь.

Проблема в том, что ваша текстовая область выше вашего div. В результате div отключает текстовое поле, поэтому, даже если кажется, что он должен начать прокрутку, когда текст выше 159px, он не начнет прокрутку, пока текст не станет выше 400px, который является высотой текстового поля.

Попробуйте следующее: http://jsfiddle.net/G9rfq/1/

Я установил overflow: auto в текстовое поле и сделал текстовое поле того же размера, что и div.

Кроме того, я не верю, что имеет значение div внутри label, браузер будет его отображать, но это может привести к появлению каких-либо фанковых вещей. Также ваш div не закрыт.

Ответ 2

overflow: auto; или overflow: hidden; должен сделать это, я думаю.

Ответ 3

Добавьте этот класс в класс .css

.scrol  { 
font: bold 14px Arial; 
border:1px solid black; 
width:100% ; 
color:#616D7E; 
height:20px; 
overflow:scroll; 
overflow-y:scroll;
overflow-x:hidden;
}

и используйте класс в div. как здесь.

<div> <p class = "scrol" id = "title">-</p></div>

Я приложил изображение, вы видите, что вне этого кода выше